点击Cancel按钮时，如何获取id为q的input元素的值？

因为你的input元素有唯一的id="q"，直接用document.getElementById()就能快速定位到它，这是最直接且可靠的方法，不需要通过多层父元素遍历（这种方式容易因为DOM结构变动失效）。

修改你的cancel函数即可实现：

function cancel(e) {
  // 定位到id为q的input元素
  const quantityInput = document.getElementById('q');
  // 获取输入框的当前值（默认是字符串类型）
  const inputValue = quantityInput.value;
  // 如果需要数字类型，可以转换一下
  const numericValue = Number(inputValue);
  
  // 打印测试
  console.log("输入框的原始值：", inputValue);
  console.log("转换为数字后的值：", numericValue);
}

完整的测试代码 #

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div>
    <div>
      Cake
      <div class="delcontainer">
        <button class=" btn btn-sm btn-danger" onclick="cancel(event)">Cancel</button>
      </div>
    </div>
    <div for="">1000</div>
    <div>
      <input type="number" value="3" id="q">
    </div>
    <div class="total">300</div>
  </div>

  <script>
    function cancel(e) {
      const quantityInput = document.getElementById('q');
      const inputValue = quantityInput.value;
      const numericValue = Number(inputValue);
      
      console.log("输入框的原始值：", inputValue);
      console.log("转换为数字后的值：", numericValue);
    }
  </script>
</body>
</html>

补充说明 #

• document.getElementById('q')：通过元素的id直接获取DOM节点，效率高且不受DOM结构变化影响
• .value：获取input元素的当前输入值，对于number类型的input，返回的是字符串，所以如果需要进行数值计算，记得用Number()转换

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