Webpage eventlistener and script section not running

Question

Trying to make a basic webpage where you can type a message for it to be displayed on the website. However, the script section of my website does not seem to work.

 <!doctype html>
 <html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

    <script>
      document.addEventListener('DOMContentLoaded', function()
      {

          let submit = document.querySelector('#submit');
          submit.addEventListener('click',function()
          {

                let questions = document.querySelectorAll('.question');
                let input = document.querySelector('input');
                for (let i =0; i< questions.length; i++)
                {
                  if questions[i].innerHTML == ""
                  {
                    questions[i].innerHTML = 'a';
                  }
                  else
                  {
                      continue;
                  }
                }
          });
        function myfunction()
          {
            alert('test');
          }
      });


  </script>
    <title>Write A Message!</title>
  </head>
  <body class="p-3 mb-2 bg-secondary text-white">
    <h1>How to write a message</h1>
    <hr>
    <p>Type a Message into the textbox below to display a public letter!</p>

    <div>
      <input type = 'text'>
      <button id = 'submit'>Type a message!</button>
    </div>
    <div>
      <h1>Message 1!</h1>
      <hr>
      <p class = 'question'></p>
      <h2>Message 2!</h2>
      <hr>
      <p class = 'question'></p>
      <h3>Message 3!</h3>
      <hr>
      <p class = 'question'></p>
      <button onclick = 'myfunction()'>test</button>
    </div>

  </body>
</html>

I tried adding a button that would display an alert as well but it does not run as well when clicked.

add your script as the last item in `body` tag, not within `head` tag. — Joshua Ooi, Feb 14 '23 at 13:25
Refer to this [explanation](https://stackoverflow.com/a/65454504/9499523) on why it your alert is not working — Joshua Ooi, Feb 14 '23 at 13:28
I've moved it to the bottom of body but it still does not work, for my code above I have the DOMContentLoaded eventlistener shown in the explanation but it does not seem to work as well — duckpro, Feb 14 '23 at 13:33

score 0 · Answer 1 · answered Feb 14 '23 at 13:53

First, javscript that contains listener/reference to DOM elements is better to include in the end on body, avoid putting in head.

Second, myfunction() is not accessible bebcause you included it under DOMContentLoaded. It should be outside of the listener (global scope).

<!doctype html>
 <html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <title>Write A Message!</title>
  </head>
  <body class="p-3 mb-2 bg-secondary text-white">
    <h1>How to write a message</h1>
    <hr>
    <p>Type a Message into the textbox below to display a public letter!</p>

    <div>
      <input type='text'>
      <button id='submit'>Type a message!</button>
    </div>
    <div>
      <h1>Message 1!</h1>
      <hr>
      <p class='question'></p>
      <h2>Message 2!</h2>
      <hr>
      <p class='question'></p>
      <h3>Message 3!</h3>
      <hr>
      <p class='question'></p>
      <button onclick='myfunction()'>test</button>
    </div>
<script>
      document.addEventListener('DOMContentLoaded', function(){
    let submit = document.querySelector('#submit');
    submit.addEventListener('click',function(){
        let questions = document.querySelectorAll('.question');
        let input = document.querySelector('input');
        for (let i =0; i< questions.length; i++){
            if (questions[i].innerHTML == ""){
                questions[i].innerHTML = 'a';
            } else {
                continue;
            }
        }
    });
});
    function myfunction() {
        alert('test');
    }
  </script>
  </body>
</html>

Ah, I see, thanks for the clarification. By not using inline do you mean the open bracket to be put on the same line as declaring the handler? — duckpro, Feb 14 '23 at 14:23
It means that avoiding calling function inline within html like `onclick="myfunction()"`. Instead set an unique id/class to the element and then attach onclick listener in javascript to trigger the function. — Joshua Ooi, Feb 14 '23 at 14:25

Webpage eventlistener and script section not running

1 Answers1