Html - Page doesn't respond to user input

Harrisino
December 30, 2023
108 views
1 vote
2 Answers

I’ve just started using JavaScript and HTML, and one of my first assignments is to create a short trivia page. I was tasked with creating a multiple choice quiz, where the button turns green if that’s the correct answer choice, and red if otherwise. For my question, the correct answer choice is 2. Nothing happens if I press a correct answer choice, or a wrong one.

body {
    background-color: #fff;
    color: #212529;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    margin: 0;
    text-align: left;
}

.container {
    margin-left: auto;
    margin-right: auto;
    padding-left: 15px;
    padding-right: 15px;
}

.header {
    background-color: #477bff;
    color: #fff;
    margin-bottom: 2rem;
    padding: 2rem 1rem;
    text-align: center;
}

.section {
    padding: 0.5rem 2rem 1rem 2rem;
}

.section:hover {
    background-color: #f5f5f5;
    color: #477bff;
    transition: color 10s ease-in-out, background-color 0.15s ease-in-out;
}

h1 {
    font-family: 'Montserrat', sans-serif;
    font-size: 48px;
}

button, input[type="submit"] {
    background-color: #d9edff;
    border: 1px solid transparent;
    border-radius: 0.25rem;
    font-size: 0.95rem;
    font-weight: 400;
    line-height: 1.5;
    padding: 0.375rem 0.75rem;
    text-align: center;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    vertical-align: middle;
}


input[type="text"] {
    line-height: 1.8;
    width: 25%;
}

input[type="text"]:hover {
    background-color: #f5f5f5;
    transition: color 2s ease-in-out, background-color 0.15s ease-in-out;
}

<!DOCTYPE html>

    <html lang="en">
        <head>
            <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap" rel="stylesheet">
            <link href="styles.css" rel="stylesheet">
            <title>Trivia!</title>
            <script>
                // TODO: Add code to check answers to questions
                function check(id){
                    button = document.querySelector('#${id}')
                    if (id == '2') {
                        button.style.backgroundColor = 'green';
                    } else {
                        button.style.backgroundColor = 'red';
                    }
                }
                document.querySelector('#1').addEventListener('click', function(){
                    check('1');
                });
                document.querySelector('#2').addEventListener('click', function(){
                    check('2');
                });
                document.querySelector('#3').addEventListener('click', function(){
                    check('3');
                });
                document.querySelector('#4').addEventListener('click', function(){
                    check('4');
                });
            </script>
        </head>
        <body>
            <div class="header">
                <h1>Trivia!</h1>
            </div>
            <div class="container">
                <div class="section">
                    <h2> Part 1: Multiple Choice </h2>
                    <hr>
                    <!-- TODO: Add multiple choice question here -->
                    <h3>
                        What does the Mushroom tell the other Mushroom when they're the only Mushrooms in their world?
                    </h3>
                    <button id="1"> I'm a Fun Guy!</button>
                    <button id="2">There's 2 mushroom?</button>
                    <button id="3"> Let me trufle over to you.</button>
                    <button id="4"> "Sigh". Lets wallop on the pizza-ria...</button>
                </div>
                <div class="section">
                    <h2>Part 2: Free Response</h2>
                    <hr>
                    <!-- TODO: Add free response question here -->
                </div>
            </div>
        </body>
    </html>

I tried to create a check function in JavaScript that evaluates the correctness based on the button number, but nothing seems to happen.

Answers

To make your snippet work you would have to add a letter in front of your numeric ids, since otherwise you will run into CSS related problems when selecting them, see Scott Marcus’s comment below and this page: https://benfrain.com/when-and-where-you-can-use-numbers-in-id-and-class-names/

body {
    background-color: #fff;
    color: #212529;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    margin: 0;
    text-align: left;
}

.container {
    margin-left: auto;
    margin-right: auto;
    padding-left: 15px;
    padding-right: 15px;
}

.header {
    background-color: #477bff;
    color: #fff;
    margin-bottom: 2rem;
    padding: 2rem 1rem;
    text-align: center;
}

.section {
    padding: 0.5rem 2rem 1rem 2rem;
}

.section:hover {
    background-color: #f5f5f5;
    color: #477bff;
    transition: color 10s ease-in-out, background-color 0.15s ease-in-out;
}

h1 {
    font-family: 'Montserrat', sans-serif;
    font-size: 48px;
}

button, input[type="submit"] {
    background-color: #d9edff;
    border: 1px solid transparent;
    border-radius: 0.25rem;
    font-size: 0.95rem;
    font-weight: 400;
    line-height: 1.5;
    padding: 0.375rem 0.75rem;
    text-align: center;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    vertical-align: middle;
}


input[type="text"] {
    line-height: 1.8;
    width: 25%;
}

input[type="text"]:hover {
    background-color: #f5f5f5;
    transition: color 2s ease-in-out, background-color 0.15s ease-in-out;
}

<!DOCTYPE html>

    <html lang="en">
        <head>
            <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap" rel="stylesheet">
            <link href="styles.css" rel="stylesheet">
            <title>Trivia!</title>
        </head>
        <body>
            <div class="header">
                <h1>Trivia!</h1>
            </div>
            <div class="container">
                <div class="section">
                    <h2> Part 1: Multiple Choice </h2>
                    <hr>
                    <!-- TODO: Add multiple choice question here -->
                    <h3>
                        What does the Mushroom tell the other Mushroom when they're the only Mushrooms in their world?
                    </h3>
                    <button id="a1"> I'm a Fun Guy!</button>
                    <button id="a2"> There's 2 mushroom?</button>
                    <button id="a3"> Let me truffle over to you.</button>
                    <button id="a4"> "Sigh". Lets wallop on the pizza-ria...</button>
                </div>
                <div class="section">
                    <h2>Part 2: Free Response</h2>
                    <hr>
                    <!-- TODO: Add free response question here -->
                </div>
            </div>
        </body>
        <script>
                // TODO: Add code to check answers to questions
                function check(id){
                    button = document.querySelector(`#${id}`)
                    if (id == 'a2') {
                        button.style.backgroundColor = 'green';
                    } else {
                        button.style.backgroundColor = 'red';
                    }
                }
                document.querySelector('#a1').addEventListener('click', function(){
                    check('a1');
                });
                document.querySelector('#a2').addEventListener('click', function(){
                    check('a2');
                });
                document.querySelector('#a3').addEventListener('click', function(){
                    check('a3');
                });
                document.querySelector('#a4').addEventListener('click', function(){
                    check('a4');
                });
            </script>
    </html>

Apart from that you should follow the DRY (don’t repeat yourself) rule and rewrite your code so there is only .addEventListener() assignment.

The

button=document.querySelector(`#${id}`)

assignment in your check() function can also be replaced by:

button=id

And in both cases it should be preceded by a let as you would otherwise pollute the global namespace.

The core issue you’re running into is that you are calling upon HTML elements which have yet to be created on your page. By moving your JavaScript lower, you’re able to call upon your HTML elements properly.

Another one of the issues I see you’re stumbling with is your id’s being numbers. You can have numbers for id’s, but using letters in your id will allow you to easily identify if you are working with a string or a number.

This allowed me to make a version of your code which is working (see the below code snippet).

// TODO: Add code to check answers to questions
function check(id) {

  // Account for the id's now being strings starting with the word 'button'
  button = document.querySelector(`#button${id}`);
  
  if (id == '2') {
    button.style.backgroundColor = 'green';
  } else {
    button.style.backgroundColor = 'red';
  }
}
document.getElementById('button1').addEventListener('click', function() {
  check('1');
});
document.getElementById('button2').addEventListener('click', function() {
  check('2');
});
document.getElementById('button3').addEventListener('click', function() {
  check('3');
});
document.getElementById('button4').addEventListener('click', function() {
  check('4');
});

body {
  background-color: #fff;
  color: #212529;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  margin: 0;
  text-align: left;
}

.container {
  margin-left: auto;
  margin-right: auto;
  padding-left: 15px;
  padding-right: 15px;
}

.header {
  background-color: #477bff;
  color: #fff;
  margin-bottom: 2rem;
  padding: 2rem 1rem;
  text-align: center;
}

.section {
  padding: 0.5rem 2rem 1rem 2rem;
}

.section:hover {
  background-color: #f5f5f5;
  color: #477bff;
  transition: color 10s ease-in-out, background-color 0.15s ease-in-out;
}

h1 {
  font-family: 'Montserrat', sans-serif;
  font-size: 48px;
}

button,
input[type="submit"] {
  background-color: #d9edff;
  border: 1px solid transparent;
  border-radius: 0.25rem;
  font-size: 0.95rem;
  font-weight: 400;
  line-height: 1.5;
  padding: 0.375rem 0.75rem;
  text-align: center;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  vertical-align: middle;
}

input[type="text"] {
  line-height: 1.8;
  width: 25%;
}

input[type="text"]:hover {
  background-color: #f5f5f5;
  transition: color 2s ease-in-out, background-color 0.15s ease-in-out;
}

<!DOCTYPE html>

<html lang="en">

<head>
  <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap" rel="stylesheet">
  <link href="styles.css" rel="stylesheet">
  <title>Trivia!</title>
</head>

<body>
  <div class="header">
    <h1>Trivia!</h1>
  </div>
  <div class="container">
    <div class="section">
      <h2> Part 1: Multiple Choice </h2>
      <hr>
      <!-- TODO: Add multiple choice question here -->
      <h3>
        What does the Mushroom tell the other Mushroom when they're the only Mushrooms in their world?
      </h3>
      <!-- Add letters into your id's, this way your id's won't be confused for numbers when they are strings -->
      <button id="button1"> I'm a Fun Guy!</button>
      <button id="button2">There's 2 mushroom?</button>
      <button id="button3"> Let me trufle over to you.</button>
      <button id="button4"> "Sigh". Lets wallop on the pizza-ria...</button>
    </div>
    <div class="section">
      <h2>Part 2: Free Response</h2>
      <hr>
      <!-- TODO: Add free response question here -->
    </div>
  </div>
  <!-- Add your JavaScript here instead -->
  <script>
  </script>
</body>

</html>

Please signup or login to give your own answer.

Click here to cancel reply.

Html – Page doesn't respond to user input

Answers