网页EventListener与脚本段无法运行问题求助

核心问题分析 #

1. 语法错误阻断脚本执行
   原代码中if语句缺少括号：

   // 错误写法
   if questions[i].innerHTML == ""
   

   JavaScript规定if的条件必须用括号包裹，这个语法错误会直接导致整个脚本报错，后续所有逻辑（包括提交按钮事件绑定、测试函数定义）都无法执行。

2. 函数作用域不匹配
   myfunction被定义在DOMContentLoaded的回调函数内部，属于局部作用域；而HTML按钮的onclick='myfunction()'是在全局作用域下调用，全局作用域无法访问局部函数，因此点击测试按钮无反应。

3. 未读取用户输入内容
   当前代码将展示的消息固定为'a'，没有使用输入框的实际内容，不符合“输入消息并展示”的需求。

修正后的完整代码 #

<!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');
                // 先判断输入是否为空
                if (!input.value.trim()) {
                    alert('请输入内容');
                    return;
                }
                for (let i =0; i< questions.length; i++)
                {
                  // 修复if语句括号问题
                  if (questions[i].innerHTML == "")
                  {
                    // 使用用户输入的内容
                    questions[i].innerHTML = input.value;
                    // 填充后清空输入框
                    input.value = '';
                    break; // 只填充第一个空的消息框
                  }
                  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>

内容的提问来源于stack exchange，提问作者duckpro