Question 42729 in Html Question posted in
Some basic documentation can be found here.

is there a way to use getElementbyid but for multiple of the same id's – Html

I’m trying to use a function that appends a text onto an answer choice on a multiple choice quiz but I can only seem to access the first answer value.

<!doctype html>
<html>
    
    <head>
        <meta charset="utf-8" />
        <title>name</title>

    </head>
    <h1>
        name
    </h1>
    <body style="background-color:rgb(73, 88, 83);">

            <div id="question1">
                <p>1. which planet is considered earth's sister planet?</p>
                <a href = "#">
                    <p id = "answer" value = "wrong">a. moon</p>
                </a>
                <a href = "#">
                    <p id = "answer"  value = "correct">b. venus</p>
                </a>
                <a href = "#">
                    <p id = "answer" value = "wrong">c. mars</p>
                </a>
            </div>

            <div id="question2">
                <p>2. when did apollo 11 land?</p>
                <a href = "#"> 
                    <p id = "answer" value = "correct">a. 1969</p>
                </a>
                <a href = "#">
                    <p id = "answer"  value = "wrong">b. 1970</p>
                </a>
                <a href = "#">
                    <p id = "answer" value = "wrong">c. 1968</p>
                </a>
            </div>

            <div id="question3">
                <p>3. which is the planet mars?</p>
                <a href = "#">
                    <p id = "answer" value = "wrong">a. <img src = "https://upload.wikimedia.org/wikipedia/commons/e/e1/FullMoon2010.jpg" width="50" height="50"> </p>
                </a>
                <a href = "#">
                    <p id = "answer"  value = "wrong">b. <img src = "https://upload.wikimedia.org/wikipedia/commons/0/0d/Africa_and_Europe_from_a_Million_Miles_Away.png" width="50" height="50"> </p>
                </a>
                <a href = "#">
                    <p id = "answer" value = "correct">c. <img src = "https://upload.wikimedia.org/wikipedia/commons/0/02/OSIRIS_Mars_true_color.jpg" width="50" height="50"> </p>
                </a>
            </div>

            <div class="buttons">
                <button id="reset-button"> Reset </button>
            </div>


            <script>
                const reset = document.getElementById("reset-button")
                var clicked = document.getElementById("answer")
                var text = document.createTextNode(" correct")
                var text_2 = document.createTextNode(" wrong")
        
                reset.addEventListener('click', resetquestions)
                clicked.addEventListener('click', giveAnswer)
                
    
                function giveAnswer() {
                    if(clicked.value === "correct") {
                        clicked.appendChild(text)
                    }
                    else {
                        clicked.appendChild(text_2)
                    }
                }

                function resetquestions() {
                    if(clicked.value === "correct") {
                        text.remove()
                    }
                    else {
                        text_2.remove()
                    }
                }
            </script>
    </body>
</html>

I want to be able to append a correct or wrong text to every answer choice that I click. I tried changing the ID’s to answer_1_1, answer_1_2 and adding an event listener to them individually but unfortunately I wasn’t even able to get the first response’s answer anymore. How can I fix this? sidenote: i’m not allowed to use buttons or input for the answer choices.

Tags:

2

Answers


  1. 0

    As in the comments on your question Id’s are unique, so using the same id for different elements will not work. You can use classnames for this use case. Here is some code to add all event listeners to the same DOM elements when using classnames instead of ID’s:

        document.querySelectorAll('.answer').forEach(element => {
      item.addEventListener('click', giveAnswer);
    });

    Example of using classname on a element:

    <p class= "answer" value = "wrong">c. mars</p>

    The use of values on a <p> element is not ideal, instead u could use radiobuttons

    Login or Signup to reply.
  2. 0

    IDs have to be unique.

    I have made a few updates to your code to simplify and solve your problems.

    • I removed the paragraph tags and gave each anchor a class of answer
    • I gave each question group the class of question
    • Non input fields shouldn’t have a value so I changed it to a data-value attribute.
    • Instead of a click handler for each element, I’m delegating it to document and checking if the clicked element has the appropriate class.
    • On click I check to see if anything has already been clicked and shown a message (this can be easily disabled if you don’t want it)
    • I create an element and append it to the answer
    • For the reset button, I look for that msg element and remove it
    • I’m using CSS to block the anchor and space and optionally style the error message
    document.addEventListener("click", (e) => {
  let el = e.target;
  if (el.classList.contains("answer")) {
    e.preventDefault()
    let hasMsg = el.closest(".question").querySelector(".answer .msg");

    if (hasMsg) {
      hasMsg.remove();
    }

    var text = document.createTextNode(el.dataset.value)
    let msg = document.createElement("span");
    msg.classList.add("msg");
    msg.appendChild(text)
    el.appendChild(msg)
  } else if (el.classList.contains("reset-button")) {
    let hasMsg = document.querySelectorAll(".answer .msg");
    hasMsg.forEach((m) => {
      m.remove()
    });
  }
});
    .answer .msg {
  display: inline-block;
  margin-left: 10px;
}

.question a {
  display: block;
  margin:10px;
  text-decoration:none;
}
    <h1>
  name
</h1>
<div class="question" id="question1">
  >1. which planet is considered earth's sister planet?
  <a href="#" class="answer" data-value="wrong">a. moon
                </a>
  <a href="#" class="answer" data-value="correct">b. venus
                </a>
  <a href="#" class="answer" data-value="wrong">c. mars
                </a>
</div>

<div class="question" id="question2">
  >2. when did apollo 11 land?
  <a href="#" class="answer" data-value="correct">a. 1969
                </a>
  <a href="#" class="answer" data-value="wrong">b. 1970
                </a>
  <a href="#" class="answer" data-value="wrong">c. 1968
                </a>
</div>

<div class="question" id="question3">
  >3. which is the planet mars?
  <a href="#" class="answer" data-value="wrong">a. <img src = "https://upload.wikimedia.org/wikipedia/commons/e/e1/FullMoon2010.jpg" width="50" height="50"> 
                </a>
  <a href="#" class="answer" data-value="wrong">b. <img src = "https://upload.wikimedia.org/wikipedia/commons/0/0d/Africa_and_Europe_from_a_Million_Miles_Away.png" width="50" height="50"> 
                </a>
  <a href="#" class="answer" data-value="correct">c. <img src = "https://upload.wikimedia.org/wikipedia/commons/0/02/OSIRIS_Mars_true_color.jpg" width="50" height="50"> 
                </a>
</div>

<div class="buttons">
  <button class="reset-button"> Reset </button>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search