CODEWITHSUNDEEP
javascripteventsinnerhtml
bstnscribe
bstnscribe

Reputation: 31

innerHTML not updating

I am trying to update the innerHTML of an element but not getting any output.

Each time an image of a taco is clicked the price of the taco should be added to the total. The values are numbers, not strings.

Any help is appreciated, I'm stumped.

(function() {

  var T1 = document.querySelector('#taco1');
  T1.addEventListener("click", function(e) {
    if (e.target.tagName === "IMG") {
      var Total = document.getElementById("Total").textContent;
      var price = document.getElementById("p1").textContent;
      var nbrprice = parseInt(price);
      var nbrTotal = parseInt(Total);
      console.log("value of nbrprice is " + nbrprice)
      console.log("nbrprice is a " + typeof(nbrprice));
      console.log("nbrTotal is a " + typeof(nbrTotal));
      var sum = Number(price) + Number(Total);
      console.log("sum is a " + typeof(sum));
      console.log("value of sum is " + sum);;
    }
    var sumtxt = (sum + nbrprice);
    Total.innerHTML = sumtxt.toString();
    console.log(Total);
  }, false);

})();
<div id='taco1'>
  <img src="https://placehold.it/300x100" width="300" />
  <p>Taco One Price: <span id="p1">4</span>
  </p>
</div>
<div id='taco2'>
  <img src="https://placehold.it/300x100" width="300" />
  <p>Taco Two Price: <span id="p2">5</span>
  </p>
</div>

<div>Total: $<span id="Total">0</span>
</div>

Upvotes: 2

Views: 8459

Answers (4)

Nallib Tala
Nallib Tala

Reputation: 66

I had the same problem with a textarea. What worked for me was changing the "value" attribute of the component

Upvotes: 0

Elias Nicolas
Elias Nicolas

Reputation: 775

Your error was using, InnerHTML on TOTAL witch was set like this

   var Total = document.getElementById("Total").textContent;

Instead of using innerHTML in just

var Total = document.getElementById("Total");

See here: When you click #taco1 you add the values to the total. Try it here: 

(function() {

  var T1 = document.querySelector('#taco1');
  T1.addEventListener("click", function(e) {
    if (e.target.tagName === "IMG") {
       var Total = document.getElementById("Total").textContent;
     var price = document.getElementById("p1").textContent;
      var nbrprice = parseInt(price);
      var nbrTotal = parseInt(Total);
      console.log("value of nbrprice is " + nbrprice)
      console.log("nbrprice is a " + typeof(nbrprice));
      console.log("nbrTotal is a " + typeof(nbrTotal));
      var sum = Number(price) + Number(Total);
      console.log("sum is a " + typeof(sum));
      console.log("value of sum is " + sum);;
     var sumtxt = (sum + nbrprice);
      console.log("sumtxt is a " + typeof(sumtxt));
      console.log("value of sumtxt is " + sumtxt);;
      console.log("sumtxt is a " + typeof((sumtxt).toString()));
      console.log("value of sumtxt is " + (sumtxt).toString());;
    document.getElementById("Total").innerHTML = sumtxt;
    console.log(sumtxt);
   }
  }, false);

})();
<div id='taco1'>
  <img src="https://placehold.it/300x100" width="300" />
  <p>Taco One Price: <span id="p1">4</span>
  </p>
</div>
<div id='taco2'>
  <img src="https://placehold.it/300x100" width="300" />
  <p>Taco Two Price: <span id="p2">5</span>
  </p>
</div>

<div>Total: $<span id="Total">0</span>
</div>

Upvotes: 0

Fabian Lurz
Fabian Lurz

Reputation: 2039

var Total = document.getElementById("Total");
//...
var nbrTotal = parseInt(Total.textContent);
//...
Total.innerHTML=sumtxt.toString();

Should work

Upvotes: 1

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324760

var Total = document.getElementById("Total").textContent;
// ...
Total.innerHTML = sumtxt.toString();

This is expected to work why?

You need to set innerHTML of the element in order for that element to update.

Upvotes: 0

Related Questions