3

Why does this javascript not work on my page? It works perfect in JSFiddle. I can see that the console is returning bananas. But I get no .innerHTML change what so ever. Any insight?

<script> 
   var bananas = true;      
   console.log(bananas);
   if (bananas == true) {
       document.getElementById("changeString").innerHTML = "You have successfully run the report."
       console.log(bananas);
   }
</script>  

<div class="cell" id="changeString">Instant ID Report has not yet been pulled for this organization.</div>

I have tried using: document.getElementsByClassName but had no success with that either.

3

Code outside of a function runs immediately. This means that the browser stops parsing the page and tries to find the element you've requested. However, the element is further along in the source code-- it does not exist according to the browser.

Historically, to make sure your elements were in place, you'd set your scripts after the elements in question. This let you hook on to them as soon as possible:

<div class="cell" id="changeString">Instant ID Report has not yet been pulled for this organization.</div>
<script> 
   var bananas = true;      
   console.log(bananas);
   if (bananas == true) {
       document.getElementById("changeString").innerHTML = "You have successfully run the report."
       console.log(bananas);
   }
</script>  

This is generally a Bad Idea™, because it holds up the UI while your script is running, can cause reflows (which, in turn, cause the page to "appear" to take longer to load, etc).

The next variation to this is what many developers to today:

<script> 
   window.onload = function() {
   var bananas = true;      
   console.log(bananas);
   if (bananas == true) {
       document.getElementById("changeString").innerHTML = "You have successfully run the report."
       console.log(bananas);
   }
}
</script>  
<div class="cell" id="changeString">Instant ID Report has not yet been pulled for this organization.</div>

Don't do this, either. While it's better, using window.onload is dangerous. Some libraries also need window.onload (it's a legacy support issue), so if you place a function here, you might break something.

Finally, there's a better event to use, called DOMContentLoaded, which is supported in all browsers that Salesforce supports, and it's faster than onload and not as sensitive to the placement of the DOM elements that inline scripts are.

That code looks like this:

<script> 
window.addEventListener('DOMContentLoaded', function() {
   var bananas = true;      
   console.log(bananas);
   if (bananas == true) {
       document.getElementById("changeString").innerHTML = "You have successfully run the report."
       console.log(bananas);
   }
});
</script>  
<div class="cell" id="changeString">Instant ID Report has not yet been pulled for this organization.</div>

This also avoids polluting the global scope (so your variables and functions won't interact with other scripts), and also makes sure that your code runs after the page is fully parsed, but before all of your page's assets have loaded (i.e. as soon as it's safe to run).

  • I never knew using onload event was a bad practice, thanks as always for another eye opener fox :). I will delete my answer, your answer seems more detailed and accurate. – Rao Oct 6 '16 at 14:15
  • thank you @sfdcfox! This worked perfectly. I have never used DOMContentLoaded before. – Olivia Oct 6 '16 at 15:15
  • @Olivia You're welcome! The web is evolving fairly regularly, so it can be tough to keep up. – sfdcfox Oct 6 '16 at 17:32

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.