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-22T23:08:18.133

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 '15 at 23:08

answered Oct 22 '15 at 23:02

el_n8

88
7

Thank you, I did not know of += functionality of displaying string for getting innerHTML. This helped – axchink Oct 23 '15 at 14:54
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; – el_n8 Oct 23 '15 at 17:21

Isaac Lyman · Answer 2 · 2015-10-22T23:10:28.893

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 '15 at 23:10

answered Oct 22 '15 at 23:04

Isaac Lyman

2,175
1
22
42

Why not just remove the comas? `colors.join("")` – Adam Buchanan Smith Oct 22 '15 at 23:08
Because then it would say "YellowYellowRed" which is not very readable. The OP asked for "Yellow, Yellow, Red", which is what my code prints. – Isaac Lyman Oct 22 '15 at 23:09
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 – axchink Oct 23 '15 at 15:18
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. – Isaac Lyman Oct 23 '15 at 15:55
I have the following written var colorsElement = document.getElementById('List'); var colors = []; colorsElement.innerHTML = ' '; – axchink Oct 23 '15 at 17:08
Should work. If you want to create a jsfiddle with your code, I'll be happy to give it a look. – Isaac Lyman Oct 23 '15 at 20:11
Hi Isaac. My code is ridiculously long. Would it be possible if you could provide me a sample example on jsfiddle? – axchink Oct 26 '15 at 18:58

score 0 · Answer 3 · answered Oct 22 '15 at 23:06

0

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

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

answered Oct 22 '15 at 23:06

Adam Buchanan Smith

9,422
5
19
39

score 0 · Answer 4 · edited May 23 '17 at 11:44

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 '17 at 11:44

Community

1
1

answered Oct 22 '15 at 23:27

K. Tippenhauer

326
2
7

score 0 · Answer 5 · answered Oct 22 '15 at 23:32

0

You can add the innerHTML value

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

my sample

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

answered Oct 22 '15 at 23:32

Andika Tanuwijaya

181
1
5

JavaScript String Output Inside IF statement

5 Answers5