Efficient workaround instead of using numerous if statements?

Question

What is a better workaround to this, rather than repeating the if statement numerous times for 10 different elements?

Html:

 <div id="rightWrongContainer">
        <div id="q1" class="rightWrong"></div>
        <div id="q2" class="rightWrong"></div>
        <div id="q3" class="rightWrong"></div>
        <div id="q4" class="rightWrong"></div>
        <div id="q5" class="rightWrong"></div>
        <div id="q6" class="rightWrong"></div>
        <div id="q7" class="rightWrong"></div>
        <div id="q8" class="rightWrong"></div>
        <div id="q9" class="rightWrong"></div>
        <div id="q10" class="rightWrong"></div>
    </div>

Js:

     if (counter == 1 && answer == userInput){
            var green = document.getElementById("q1").style.backgroundColor="green";
          }
          else {
            var red = document.getElementById("q1").style.backgroundColor="red";
          }
    if (counter == 2 && answer == userInput){
            var green = document.getElementById("q2").style.backgroundColor="green";
          }
          else {
            var red = document.getElementById("q2").style.backgroundColor="red";
          }

    if (counter == 3 && answer == userInput){
            var green = document.getElementById("q3").style.backgroundColor="green";
          }
          else {
            var red = document.getElementById("q3").style.backgroundColor="red";
          }

and so on...

Edit: see this image My project

Each time a user submits their answer, I want the divs (circles in image link) to change according to if the answer is correct hence 'answer == userInput' but also the right div has to equal the right number of question so I have created a counter so I know what question the user is on but i dont want to create an if statement for every element ' counter == 1 , counter == 2 and so on...

Is there a relation between `answer` and `counter`? I would say: yes; please specify/clarify. — Peter B, Oct 29 '18 at 12:51
@messerbill I have added a little more information to my question — liam, Oct 29 '18 at 14:34
@PeterB answer is a value which checks the outcome of a maths sum, counter is keeping track of how many questions they have done by adding +1 each time they answer a question — liam, Oct 29 '18 at 14:35

score 0 · Answer 1 · answered Oct 29 '18 at 12:39

0

I don't fully understand the problem, but this can be a solution

var items = document.querySelectorAll('#rightWrongContainer>.rightWrong');

items.forEach(function(item) {
    item.style.backgroundColor = answer == userInput ? 'green' : 'red'
}

answered Oct 29 '18 at 12:39

Minan

807
7
17

The approach is rather promising, but as written, either all items will become green or all will become red. – Peter B Oct 29 '18 at 12:49
`items.forEach( (item, i) => item.style.backgroundColor = (answer==userInput && counter==i) ? 'green' : 'red')` – Jeremy Thille Oct 29 '18 at 13:04

score 0 · Accepted Answer · answered Oct 29 '18 at 12:44

0

you can use the .children property to access an HTMLCollection of elements within a selected element. in your example you can do

var elemList = document.getElementById("rightWrongContainer").children;

I wrote up an example for you on how to use this: http://jsfiddle.net/30u847gL/

Also, some light reading: https://developer.mozilla.org/en-US/docs/Web/API/ParentNode/children

Happy Coding!

answered Oct 29 '18 at 12:44

Qamar Stationwala

138
1
11

In your fiddle: Why use `getElementById()` when you already have all the elements? – Peter B Oct 29 '18 at 12:46
Mmm vanilla js isnt my strongsuit. Im more used to jQuery. XD – Qamar Stationwala Oct 29 '18 at 18:42

mdfst13 · Answer 3 · 2018-10-29T18:14:58.810

You can get a group of elements by either finding the children of a parent:

var qs = document.getElementById("rightWrongContainer").children;

or by getting elements by class:

var qs = document.getElementsByClassName("rightWrong");

You can iterate over a group of elements by a number of methods, e.g.

for (var i = 0; qs[i]; i++) {
    if (counter == i + 1 && answer == userInput) {
        qs[i].style.backgroundColor = "green";
    } else {
        qs[i].style.backgroundColor = "red";
    }
}

Efficient workaround instead of using numerous if statements?

3 Answers3