JS代码运行bug问题


<body>
  <input type="text" name="username">
  <button id="btn">注册</button>
  <script>
    /* 本案例需求:  点击注册按钮 获取输入框的value属性值 并在浏览器里面打印
          (1)请找出下列代码产生的bug
              如何找出来的?
              原因分析:
          (2)如果想要实现正确的需求,应该如何实现
      */
    const val = document.querySelector('[name=username]').value
    const btn = document.querySelector('#btn')
    btn.addEventListener('click', function () {
      console.log(val)
    }) 
  </script>
</body>

为什么打印输出一直是空？怎么改？

放在里面


  <script>
    /* 本案例需求:  点击注册按钮 获取输入框的value属性值 并在浏览器里面打印
          (1)请找出下列代码产生的bug
              如何找出来的?
              原因分析:
          (2)如果想要实现正确的需求,应该如何实现
      */
    
    const btn = document.querySelector('#btn')
    btn.addEventListener('click', function () {
        const val = document.querySelector('[name=username]').value
      console.log(val)
    }) 
  </script>

【以下回答由 GPT 生成】

问题分析

根据代码，在点击注册按钮时，需要获取输入框的值，并在浏览器中打印出来。然而，在当前的代码中，值一直为空。

问题出现的原因分析如下： - 在代码中，获取输入框的值是在页面加载时就执行的，并且只执行一次。也就是在代码加载完成之后，立即获取输入框的值。此时，页面刚刚加载完成，用户还没有输入任何内容，所以获取到的值为空。 - 所以，当点击按钮时，仍然打印的是初始化时获取的空值。

解决方案

为了解决这个问题，我们需要在按钮点击事件触发时，重新获取输入框的值。以下是更改后的代码：

const btn = document.querySelector('#btn');
btn.addEventListener('click', function() {
  const val = document.querySelector('[name=username]').value;
  console.log(val);
});

优化说明

  1. 在问题标题中指明了问题类型为JS代码运行bug问题，并添加了适当的问题标签。
  2. 添加了问题描述的具体内容，以帮助理解问题背景和需求。


【相关推荐】



如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^