[SalesForce] Simple JavaScript Not Working On Visualforce Page

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.

Best Answer

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).

Related Topic