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

How can I change the color of a button and display text based on a form submission? (JavaScript/HTML beginner question)

Javascript beginner mistakes(?). Behavior expected seems to be buggy

I’m trying to create a simple website with a form submission that will make the submit button green if the answer is right and red otherwise. there should also be a text that appears below as "Correct!" or "Wrong"

Here is the code

document.addEventListener('DOMContentLoaded', function() {
  document.querySelectorAll('button').forEach(function(button) {
    button.addEventListener('click', function() {
      document.querySelectorAll('button').forEach(function(btn) {
        btn.style.backgroundColor = '';
      });

      //To get the selected answer
      let selected_answer = button.textContent;

      //Check if answer is correct
      if (selected_answer == 'Korean') {

        button.style.backgroundColor = 'green';

        //Add result as text
        document.querySelector('p').innerHTML = 'Correct';
      } else {
        //if answer is wrong
        button.style.backgroundColor = 'red';

        document.querySelector('p').innerHTML = 'Wrong';
      }
    });
  });
});


document.querySelector('#submit').addEventListener('click', function(event) {
  event.preventDefault();

  let answer = document.querySelector('#text').value.toLowerCase();
  let button1 = document.querySelector('#submit');

  if (answer === 'latin') {

    button1.style.backgroundColor = 'green';
    document.querySelector('#p2').innerHTML = 'Correct!';
  } else {

    button1.style.backgroundColor = 'red';
    document.querySelector('#p2').innerHTML = 'Wrong!';
  }
});
<div class="header">
  <h1>Trivia!</h1>
</div>

<div class="container">
  <div class="section">
    <h2>Part 1: Multiple Choice </h2>
    <hr>
    <h3>Which one of these languages are not spoken in Europe?</h3>

    <button type="button">French</button>
    <button type="button">Italian</button>
    <button type="button">Korean</button>
    <button type="button">Spanish</button>

    <p></p>

  </div>

  <div class="section">
    <h2>Part 2: Free Response</h2>
    <hr>
    <h3>Which language did French, Italian, Spanish and Portuguese cam from?</h3>
    <form>
      <input type="text" id="text">
      <button type="submit" id="submit">Check Answer</button>
    </form>
    <p id="p2"></p>
  </div>
</div>

Once i run it and answer it correctly the text below will say "CORRECT" however

The submit button will turn red and Part 1 will have a result "Wrong"

Tags:

3

Answers


  1. 0

    you don’t need to add the second event listener for the submit button as it already has event listener in the first function. You just need to add condition that checks if the button’s id is submit and if it is it’ll fire the code for Part 2 check. Otherwise it will fire the Part 1 check code. The 2 event listeners messed up your code.

    document.addEventListener('DOMContentLoaded', function() {
document.querySelectorAll('button').forEach(function(button) {
    button.addEventListener('click', function() {
        document.querySelectorAll('button').forEach(function(btn) {
            btn.style.backgroundColor = '';
        });

        if (button.id === "submit") {
            event.preventDefault();

            let answer = document.querySelector('#text').value.toLowerCase();
            let button1 = document.querySelector('#submit');

            if (answer === 'latin') {

                button1.style.backgroundColor = 'green';
                document.querySelector('#p2').innerHTML = 'Correct!';
            } else {

                button1.style.backgroundColor = 'red';
                document.querySelector('#p2').innerHTML = 'Wrong!';
            }
        } else {
            //To get the selected answer
            let selected_answer = button.textContent;

            //Check if answer is correct
            if (selected_answer == 'Korean') {

                button.style.backgroundColor = 'green';

                //Add result as text
                document.querySelector('p').innerHTML = 'Correct';
            } else {
                //if answer is wrong
                button.style.backgroundColor = 'red';

                document.querySelector('p').innerHTML = 'Wrong';
            }
        }
    });
});
});
    <div class="header">
  <h1>Trivia!</h1>
</div>

<div class="container">
  <div class="section">
    <h2>Part 1: Multiple Choice </h2>
    <hr>
    <h3>Which one of these languages are not spoken in Europe?</h3>

    <button type="button">French</button>
    <button type="button">Italian</button>
    <button type="button">Korean</button>
    <button type="button">Spanish</button>

    <p></p>

  </div>

  <div class="section">
    <h2>Part 2: Free Response</h2>
    <hr>
    <h3>Which language did French, Italian, Spanish and Portuguese cam from?</h3>
    <form>
      <input type="text" id="text">
      <button type="submit" id="submit">Check Answer</button>
    </form>
    <p id="p2"></p>
  </div>
</div>
    Login or Signup to reply.
  2. 0 
    document.addEventListener('DOMContentLoaded', () => {
const ansBtns = document.querySelectorAll('.ansBtn');
const statusText = document.querySelector('#p2');
const submitBtn = document.querySelector('#submit');
let selected_answer = undefined;
let selectedBtn = undefined;
let ansValid = {isValid: false}


ansBtns.forEach((btn) => {
    btn.addEventListener('click', (e) => {
        e.preventDefault();
        ansBtns.forEach((item) => item.style.backgroundColor = '');
        selected_answer = e.target.textContent;
        selectedBtn = e.target;
        if (selected_answer == 'Korean') {
            selectedBtn.style.backgroundColor = 'green';
            ansValid.isValid = true;
            statusText.textContent = 'Correct';
            return;
        }
        selectedBtn.style.backgroundColor = 'red';
        statusText.textContent = 'Wrong';
        ansValid.isValid = false;
    });
});

submitBtn.addEventListener('click', (e) => {
    e.preventDefault();
    if (ansValid.isValid) {
        statusText.textContent = 'Correct';
        return;
    };
    statusText.textContent = 'Wrong';
    
});

    });

    Login or Signup to reply.
  3. 0

    You added events to all off the buttons as someone already said that . Just add a class name to buttons with answers for example "class = buttonAnwser" and than use forEach loop to set events on those buttons and everything will work fine and also you dont really need to use nesting , that just add complication in my opinion … The problem you had is that you assigned events to all buttons including button with id submit so when you click on check answer it fill fire the if block wich is true so its going to set color and text you defined in that if block , and after than its going to go to see if else block is true wich in your case is also true and it will set backgroundColor to red and text to wrong …

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search