JavaScript Changing HTML Content

Question

I have a div with a string inside of it. I want to change that string if something specific happens. I am not sure why but I can't get the string to change at all even if there is no conditional. I am very rusty to JavaScript so any advice would be appreciated, I am slowly getting back to the basics.

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

var bananas = true;      
if (bananas = true){
    document.getElementById('changeString').innerHTML = "You have successfully run the report.";
}

Can anyone see what I am doing wrong? I have also tried putting the JS into a function and calling it in the div with onload="methodName".

Missing quotes in getElementById(changeString) and the = in the if should be == or ===. = is assignment, == and === are comparison — j08691
– j08691, Commented Oct 5, 2016 at 20:12
changeString is a variable that refers to the DOM element. getElementById however expects to be passed a string value. So either do changeString.innerHTML = ... or document.getElementById('changeString').innerHTML = ... — Felix Kling
– Felix Kling, Commented Oct 5, 2016 at 20:15
Good catch thank you. var bananas = true; console.log(bananas); if (bananas == true){ document.getElementById("changeString").innerHTML = "You have successfully run the report."; } This still doesn't work but I can see in the console that it is returning true. — Olivia
– Olivia, Commented Oct 5, 2016 at 20:19
Make sure you run the JavaScript after the div was loaded. It should work. See jsfiddle.net/jkdmzvo4 — j08691
– j08691, Commented Oct 5, 2016 at 20:24
if you run in it in html add script tags jsfiddle.net/maio/8qt9fzjr/2 — maioman
– maioman, Commented Oct 5, 2016 at 20:25

Community · Accepted Answer · 2017-05-23 12:00:56Z

3

Just like @j08691 mentioned in the above comment you should add quotes to getElementById() :

document.getElementById("changeString").innerHTML = "You have successfully run the report."
________________________^____________^

And to use == or === in your condition for comparison instead of equal = that used for assignment:

if (bananas === true){

And it will work as you could see below.

Hope this helps.

document.addEventListener("DOMContentLoaded", function(event) { 
  var bananas = true;

  if (bananas === true){
    document.getElementById("changeString").innerHTML = "You have successfully run the report."
  }
});

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

edited May 23, 2017 at 12:00

CommunityBot

11 silver badge

answered Oct 5, 2016 at 20:25

Zakaria Acharki

67.5k15 gold badges79 silver badges106 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Olivia Over a year ago

thank you for your feedback. I believe I am running into an issue with my IDE, your code and the JSFiddle provided all work, just not with my current settings for some reason.

Zakaria Acharki Over a year ago

You're welcome, have you tried to add code inside ready function? try my update..

Zakaria Acharki Over a year ago

That strange have you tried to add an alert or console.log() to make sure that this part of your code is reached?

Olivia Over a year ago

yes, and it is logging in the console. It is so strange...my only last guess is that it is because I am writing HTML in a Visualforce page and they don't like each other. I already have about 800 lines that have no errors so I am just as confused as you are!

Collectives™ on Stack Overflow

JavaScript Changing HTML Content

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related