Creating a function for a button that can be used for a certain class using JavaScript

Question

Ultimately, my objective here is to create a JS script where I can use for my quizzes. In a page, I may put more than one item. In this regard, I will have more than one button, one button per item. What you see here is a prototype. (I wanted to see how each element interacts with one another.) In the process of trying to get it work, I looked over what others have done. However, I came to a point where I am stuck and could not see what I am doing wrong. I have a sense of where the problem is but I am not certain of it. Anyway, please see where my mistakes are and let me know.

This is the html part. What I want to happen here is I click the top button and the background of the text, "Hello" at top turns red. I press the middle and the text background turn red, and so on. Currently, I press any button and they all turn red.

<div class="q">
  <div class="p">
    <p>Hello</p>
  </div>
  <button>Show Answer</button>
</div>
<div class="q">
  <div class="p">
    <p>Hello</p>
  </div>
  <button>Show Answer</button>
</div>
<div class="q">
  <div class="p">
    <p>Hello</p>
  </div>
  <button>Show Answer</button>
</div>

The link to the js script is located in the head section.

<script src="../js/s3.js"></script>

Here is the js. I suspect my mistake is in the second half. The reason for this is that I made the var in the second for the same as in the first one and still got the same result. It made me wonder whether if the computer is ignoring this part. I could be wrong. I tried querySelectorAll and the result is the same as well. By the way, when is it advantageous to use querySelectorAll and getElementsByClassName if class is involved?

window.onload = function () {
  let c = document.getElementsByClassName('q');
  for (var ii = 0; ii < c.length; ii++) {
    c[ii].addEventListener('click', function () {
    let a = document.getElementsByClassName('p');
  for (var i = 0; i < a.length; i++) {
    a[i].classList.add('cellRed');
   }
  });
 } 
}

Here is the CSS.

.cellGreen {
    background-color: green;
    color: white;
}

.cellRed {
    background-color: red;
    color: white;
}

I was told to keep things separate. So I did.

Answer 1

I know you want help with your javascript code, but others have already helped you, so I mostly wanted to show that this can be solved with pure CSS only without javascript. :) I'm basically using radio-buttons and sibling selector.

div.p > p {
  margin-bottom: 0;
}

div.p > input {
  display: none;
}

div.p > label {
  cursor: pointer;
  font-size: 90%;
  margin-right: 1rem;
}

div.p > input:checked ~ p {
    color: white;
    background-color: red;
}

div.p > input:checked[value="correct"] ~ p {
    background-color: green;
}

<div class="q">
  <div class="p">
    <input type="radio" name="q1" id="q1_alt1" value="correct" />
    <input type="radio" name="q1" id="q1_alt2" />

    <p>Hello</p>
  
    <label for="q1_alt1">Answer 1</label>
    <label for="q1_alt2">Answer 2</label>
  </div>
</div>

<div class="q">
  <div class="p">
    <input type="radio" name="q2" id="q2_alt1" />
    <input type="radio" name="q2" id="q2_alt2" value="correct" />

    <p>Hello</p>

    <label for="q2_alt1">Answer 1</label>
    <label for="q2_alt2">Answer 2</label>
  </div>
</div>

<div class="q">
  <div class="p">
    <input type="radio" name="q3" id="q3_alt1" />
    <input type="radio" name="q3" id="q3_alt2" />
    <input type="radio" name="q3" id="q3_alt3" value="correct" />

    <p>Hello</p>
  
    <label for="q3_alt1">Answer 1</label>
    <label for="q3_alt2">Answer 2</label>
  <label for="q3_alt3">Answer 3</label>

  </div>
</div>

Answer 2

First thing you should do when tackling a problem is to think about what you're trying to accomplish. It really does help to list it in steps.

• In every Question div
  • Get the Button
  • Get the Paragraph
  • When the Button is clicked
    • Turn the Paragraph Red

---

This allows us to build our code rather simply from step 1 onward. This isn't always perfect, but it is always helpful.

---

Get All Questions

let questions = document.querySelectorAll(".q");

For Each Question

questions.forEach(question => {

    // ... do something

});

Get the Button

questions.forEach(question => {

  let btn = question.querySelector("button");

});

Get the Paragraph

questions.forEach(question => {

  let btn = question.querySelector("button");
  let p = question.querySelector("p");

});

When the Button is Clicked

questions.forEach(question => {

  let btn = question.querySelector("button");
  let p = question.querySelector("p");

  btn.addEventListener("click", function() { 

     // ... do something

  });

});

Turn the Paragraph Red

questions.forEach(question => {

  let btn = question.querySelector("button");
  let p = question.querySelector("p");

  btn.addEventListener("click", function() { 

     p.classList.add("cellRed");

  });

});

---

Final Example:

window.onload = function() {
  let questions = document.querySelectorAll(".q");

  questions.forEach(question => {
    let btn = question.querySelector("button");
    let p = question.querySelector("p");

    btn.addEventListener("click", function() {
      p.classList.add('cellRed');
    });
  })
}

.cellGreen {
  background-color: green;
  color: white;
}

.cellRed {
  background-color: red;
  color: white;
}

<div class="q">
  <div class="p">
    <p>Hello</p>
  </div>
  <button>Show Answer</button>
</div>
<div class="q">
  <div class="p">
    <p>Hello</p>
  </div>
  <button>Show Answer</button>
</div>
<div class="q">
  <div class="p">
    <p>Hello</p>
  </div>
  <button>Show Answer</button>
</div>

Answer 3

That second loop is unnecessary. Just use let instead of var in first loop.

According to MDN:

let allows you to declare variables that are limited in scope to the block, statement, or expression on which it is used. This is unlike the var keyword, which defines a variable globally, or locally to an entire function regardless of block scope.

Look at example below:

window.onload = function () {
  let c = document.getElementsByClassName('q');
  for (let i = 0; i < c.length; i++) {
    c[i].addEventListener('click', function () {
    let a = document.getElementsByClassName('p');
    a[i].classList.add('cellRed');
  });
 } 
}

.cellGreen {
    background-color: green;
    color: white;
 }

.cellRed {
    background-color: red;
    color: white;
  }

<div class="q">
<div class="p">
<p>Hello</p>
</div>
<button>Show Answer</button>
</div>
<div class="q">
<div class="p">
<p>Hello</p>
</div>
<button>Show Answer</button>
</div>
<div class="q">
<div class="p" >
<p>Hello</p>
</div>
<button>Show Answer</button>
</div>`