CODEWITHSUNDEEP
javascripthtml
Reuben Ward
Reuben Ward

Reputation: 99

getElementByID.innerHTML is failing to change text

I am new to HTML and Javascript and I decided to try write a basic shopping cart.

I have a problem though. Why doesent this: 

    if(totalItems == 0)
{

  document.getElementById('yourCartContains').innerHTML = "Your cart contains no items!";   
}

Change this:

<b id = "yourCartContains">0</b>

To say "your cart contains no items" instead of 0?

The function definitely works, because I have tried switching the function to show an alert and it does this without any problems - so function works, but for some reason the function does not change the text.

Here is the function with the alert (I even changed totalItems to 0 to prove function is being called):

var totalItems = 0;
if(totalItems == 0)
{
  alert("Random Alert is called upon function being executed");
  document.getElementById('yourCartContains').innerHTML = "Your cart contains no items!";   <!-- But this isnt -->
}

I am debugging in chrome.

Upvotes: 0

Views: 2672

Answers (4)

Peter Chen
Peter Chen

Reputation: 871

I have very painful experience using text to innerHTML. Since my text contains a lot of dynamic element (select2 for searching option list) and I forgot to put ending quote . The text looks fine, in some cases, however, the innerHTML truncate the "submit" button is missing. The text assigned to innerHTML is translate to other strange result automatically. if HTML syntax is not correct, it produces very weird string in innerHTML. the problem is intermittent, some case is fine, some are not good. Since project is big, I wasted whole night effort to fight to bug.

I finally figure a way to debug the dynamic element by using W3 validator (https://validator.w3.org/nu). copy and paste into a file and check the dynamic element syntax. There are some online HTML checker (https://www.freeformatter.com/html-validator.html).

Upvotes: 0

snehil karn
snehil karn

Reputation: 3

<script type="text/javascript">
    var totalItems = 0;
    if(totalItems == 0)
    {document.getElementById('yourCartContains').innerHTML = "Your cart contains no items!";}
  </script>
<span id="yourCartContains" style="font-weight:bold"></span>

Upvotes: 0

Roman
Roman

Reputation: 6408

document.getElementByID().innerHTML definitely works.

Make sure:

  • document refers to the same document the element is in (you're not working with an iframe or such).

  • you call the function when the element is attached to the DOM.

    This doesn't work: 

    <script>document.getElementById('foo').innerHTML = 'bar';</script>
<b id="foo"></b>

    This works:

    <b id="foo"></b>
<script>document.getElementById('foo').innerHTML = 'bar';</script>
  • your html is valid. It could be that invalid markup doesn't let your browser find the correct element.

Anyway, if you're working in chrome, you really should debug with the console and not with "alerts". Press F12 (on Windows / Linux) or Cmd + Opt + I on Mac. If there are any errors, you should see them in red in the console tab.

If there are no errors, do this:

if(totalItems == 0)
{
  console.log('el: ', document.getElementById('yourCartContains'));
  document.getElementById('yourCartContains').innerHTML = "Your cart contains no items!";   <!-- But this isnt -->
}

and see what your console tells you. (There probably will be an el: undefined)

Upvotes: 2

Creaven
Creaven

Reputation: 319

This works for me. Have you loaded your script after your html?

<html>
    <head>


        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        <div><b id = "yourCartContains">0</b></div>


        <script>

           var totalItems = 0;
if(totalItems == 0)
{
  alert("Random Alert is called upon function being executed");
  document.getElementById('yourCartContains').innerHTML = "Your cart contains no items!";   <!-- But this isnt -->
} 


        </script>
    </body>
</html>

Upvotes: 0

Related Questions