function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Olivia Porter 1Olivia Porter 1 

Simple JavaScript Not Working On A 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."
    }
</script>     

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

 

 

Best Answer chosen by Olivia Porter 1
Olivia Porter 1Olivia Porter 1

The solution is in DOMContentLoaded. Please see below:

 

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

This allows me to change the innerHTML only after an action takes place.

All Answers

UC InnovationUC Innovation
I'd probably check if getElementById is getting the correct element. It might be that the element does not finish loading before your javascript runs. Try this: 
​window.onload = function() 
{ 
    /* Add your logic here */ 
}

Let me know if that works! 
Olivia Porter 1Olivia Porter 1
Thank you, this did not 100% solve the issue but I was missing this. I will update when I get this resolved.
Olivia Porter 1Olivia Porter 1

The solution is in DOMContentLoaded. Please see below:

 

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

This allows me to change the innerHTML only after an action takes place.

This was selected as the best answer