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>

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

写回答
好问题 0 提建议
追加酬金
关注问题
分享
邀请回答
编辑收藏删除
收藏举报

2条回答默认最新

瞬间的未来式 2023-08-30 11:38

关注

放在里面


  <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>