Replacing a string value using the click event

Question

I'm building a donate modal.

When I click on the donate button, the progress bar gets incremented based on the input value.

I want to replace the money string from h1 when I click on donate. So if the input value is 10, when I click on the donate button the h1 should read:

$140 is still needed for this project

This runs only once, because it replaces the text only when it finds '$150'.

.modal
      .modal-header-box
        h1 $150 is still needed for this project
      .modal-content
        progress#myProgress(value='50', max='200')
        h1 Only days left to fund this project. Join the other 42 other donors who have already suppoorted this project. Every dollar helps.
        input(type='number', placeholder='$' id='value', max='100')
        button#btn Give Now
      .button.save-later Save for later
      .button.social Tell your friends

JavaScript

document.getElementById('btn').addEventListener('click', function() {
  var x = document.getElementById('myProgress');

  console.log(x.value, document.getElementById('value').value)
  x.value = +x.value + +document.getElementById('value').value;

  let difference = x.max - x.value;
  console.log(difference);

  document.body.innerHTML = document.body.innerHTML.replace('$150', `${difference}`);

});

Is there any way to make this more dynamic, so the string will update If click on the donate button multiple times?

CodePen link

https://codepen.io/make96/pen/XWZdbPZ

Instead of trying to replace anything, you should wrap the $150 inside the headline into an additional span element - then you can simply explicitly set the text content for that span to a new value, without having to know the old one to "replace." — C3roe
– C3roe, Commented May 9, 2022 at 12:59
Additional info: You also have to convert the number into an Integer. If not you will concat the new amount instead of calculation of this. For that exists parseInt(). — Reporter
– Reporter, Commented May 9, 2022 at 13:09

Nils Kähler · Accepted Answer · 2022-05-09 13:07:47Z

1

Your problem resides in replacing everything on the page. You should restrict the transformation to the elements that you are changing. Instead of replacing document.body, then target the modal header box instead.

document.body.innerHTML = document.body.innerHTML.replace('$150', `${difference}`);

Replace the modal-header-box content instead.

 document.getElementsByClassName("modal-header-box")[0].innerHTML = `<h1>$${difference} is still needed for this project</h1>`;

answered May 9, 2022 at 13:07

Nils Kähler

3,0211 gold badge24 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Rowan · Accepted Answer · 2022-05-09 13:15:51Z

0

Just put the number in a span and only change the span input on every click. You take the value of the span and the value of the input box and substract it everytime you click on it.

Function:

document.getElementById("btn").onclick = function(){
  var value = parseInt(document.getElementById("test").innerHTML);

  var donate = parseInt(document.getElementById("value").value);

  document.getElementById("myProgress").value += donate;

  document.getElementById("test").innerHTML = value-donate;
}

modal-header-box

.modal-header-box
        h1 $<span id="test">150</span> is still needed for this project

edited May 9, 2022 at 13:15

answered May 9, 2022 at 13:10

Rowan

591 silver badge10 bronze badges

Comments

Rahul Sharma · Accepted Answer · 2022-05-09 13:20:55Z

0

Don't replace the document body, Not good practice to update the body every time, update only the required field.

Javascript

document.getElementById("btn").addEventListener("click", function() {
  const title = document.getElementById("title");
  const x = document.getElementById("myProgress");
  const prev = +x.value
  x.value = prev + +document.getElementById("value").value;
  let difference = x.max - x.value;
  title.innerHTML = title.innerText.replace(x.max - prev, `${difference}`);
});

Template

h1#title $150 is still needed for this project

edited May 9, 2022 at 13:20

answered May 9, 2022 at 13:09

Rahul Sharma

10.1k1 gold badge20 silver badges41 bronze badges

Collectives™ on Stack Overflow

Replacing a string value using the click event

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related