JavaScript String Output Inside IF statement

Question

I am relatively new to JavaScript and I need help with a concept.

So, I have written up something such that, for example, inside the HTML file, I have a div with id called "GetID" which is where I want to display my string outputs.

Inside the JavaScript is such code that

for(looping through data) {
    if (Condition 1){
        document.getElementById("GetID").innerHTML = "Yellow"
    }
    else if (Condition 2){
        document.getElementById("GetID").innerHTML = "Red"
    }
}

My question is, how do I display the next condition besides the previous one instead of replacing it every time inside the div?

For example, if the loop runs, and first and second condition is Yellow, third is Red, I want it to display "Yellow, Yellow, Red" Right now, it keeps replacing it such that, Yellow, then Yellow, then Red - only 1 string output in same div ID, replacing the previous output

el_n8 · Accepted Answer · 2015-10-22 23:08:18Z

1

This is because you are reassigning innerHTML each time, and thus overwriting its contents.

Try innerHTML or innerText += "yellow" instead of just using '='. So:

for(looping through data) {
if (Condition 1){
    document.getElementById("GetID").innerHTML += "Yellow, "
}
else if (Condition 2){
    document.getElementById("GetID").innerHTML += "Red, "
}

}

This does leave you with a dangling comma at the end though.

edited Oct 22, 2015 at 23:08

answered Oct 22, 2015 at 23:02

el_n8

887 bronze badges

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

2 Comments

axchink Over a year ago

Thank you, I did not know of += functionality of displaying string for getting innerHTML. This helped

el_n8 Over a year ago

Certainly. That notation (+=) is just shorthand for old_string = old_string + new_string; You can use such notation with most other operators too, so something like: var x = 3; x *= 4; x; // 3 * 4, or 12;

Isaac Lyman · Accepted Answer · 2015-10-22 23:10:28Z

1

I'd recommend using an array to hold your colors, if you want it all formatted nicely:

// Get element
var colorsElement = document.getElementById('GetID');
var colors = [];

// Clear element
colorsElement.innerHTML = '';

// Loop through and build array
for (loop) {
  if (condition1) {
    colors.push('Yellow');
  } else if (condition2) {
    colors.push('Red');
  }
}

// Display colors    
colorsElement.innerHTML = colors.join(', ');

This way you'll get "Yellow, Yellow, Red" just like you asked for. Editing the HTML directly on each iteration (as other answers recommend) is fine, but won't come out quite the same (for example, that will make it do "Yellow, Yellow, Red, " but there's no way for it to stop putting commas when it hits the last one). Using an array with join will format the string as you asked.

edited Oct 22, 2015 at 23:10

answered Oct 22, 2015 at 23:04

Isaac Lyman

2,1971 gold badge25 silver badges43 bronze badges

7 Comments

Adam Buchanan Smith Over a year ago

Why not just remove the comas? colors.join("")

Isaac Lyman Over a year ago

Because then it would say "YellowYellowRed" which is not very readable. The OP asked for "Yellow, Yellow, Red", which is what my code prints.

axchink Over a year ago

Thank you for your help but how do you declare colorsElement.innerHTML = ' ' ; and colorsElement.innerHTML = colors.join (', '); When I input this in my code, the program do not run

Isaac Lyman Over a year ago

You might be forgetting the line that says var colorsElement = document.getElementById('GetID'); at the top. You have to assign the variable before you use it.

axchink Over a year ago

I have the following written var colorsElement = document.getElementById('List'); var colors = []; colorsElement.innerHTML = ' ';

|

Adam Buchanan Smith · Accepted Answer · 2015-10-22 23:06:34Z

0

Just use += instead of = see fiddle: http://jsfiddle.net/23n76huL/14/

document.getElementById("GetID").innerHTML += "Yellow";

answered Oct 22, 2015 at 23:06

Adam Buchanan Smith

9,4675 gold badges21 silver badges39 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 11:44:50Z

0

Another solution is to add new elements to you div.

The code here is based on the solution of Ben Blank

var arr = ["Yellow", "Red", "Blue"];

for(var i = 0; i < arr.length; i++) {
    var newSpan = document.createElement('span');
    newSpan.innerHTML = gallery.image[i].url;
    document.getElementById("GetID").appendChild(newSpan);
}

edited May 23, 2017 at 11:44

CommunityBot

11 silver badge

answered Oct 22, 2015 at 23:27

K. Tippenhauer

3262 silver badges7 bronze badges

Comments

Andika Tanuwijaya · Accepted Answer · 2015-10-22 23:32:52Z

0

You can add the innerHTML value

document.getElementById("test").innerHTML += e.value;

my sample

http://jsfiddle.net/quwkh25y/1/

answered Oct 22, 2015 at 23:32

Andika Tanuwijaya

1912 silver badges5 bronze badges

Collectives™ on Stack Overflow

JavaScript String Output Inside IF statement

5 Answers 5

2 Comments

7 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

7 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related