Friday

Page doesn't respond to user input

1:47 AM css, function, html, javascript No comments

Issue

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.

Solution

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>

Answered By - Nick Friesen

This Answer collected from stackoverflow and tested by AngularFix community admins, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Friday

Page doesn't respond to user input

Issue

Solution

0 comments:

Post a Comment

Popular Posts

Labels