Question

我有两个按钮，我想将按下按钮的value属性存储到一个名为amount的变量中。下面的代码显然是错误的，两个按钮都有两个相同的ID。我应该在函数中做什么，以将value属性保存为变量onclick？

<button type="button" id='btn' onclick='storeVar' value='1'>1</button>
<button type="button" id='btn' onclick='storeVar' value='2'>2</button>
<script>
  function storeVar() {
    var amount = document.getElementById('btn').getAttribute('value');
    console.log(amount);
  } 
</script>

Answer 1

属性 id 在文档中必须是唯一的，请改用 class 。还将this传递给函数，以便您可以引用函数内的当前按钮：

function storeVar(el) {
  var amount = el.getAttribute('value'); 
  // OR: simply 
  // var amount = el.value;
  console.log(amount);
}

<button type="button" class='btn' onclick='storeVar(this)' value='1'>1</button>
<button type="button" class='btn' onclick='storeVar(this)' value='2'>2</button>

Answer 2

为每个按钮指定唯一的ID或完全删除ID属性。修复html后，请尝试以下代码。

<button type="button" id='btn' onclick='storeVar(this.value)' value='1'>1</button>
<button type="button" id='btn-two' onclick='storeVar(this.value)' value='2'>2</button>

<script>
    function storeVar(v){
        let amount = v;
        console.log(amount);
    }
</script>

Answer 3

确保具有唯一的ID。

<button type="button" id='btn-one' onclick='storeVar(this.value)' value='1'>1</button>
<button type="button" id='btn-two' onclick='storeVar(this.value)' value='2'>2</button>

<script>
function storeVar(value){
    let amount = value;
    console.log(amount);
}
</script>

使用javaScript将按钮中的值存储在变量中

3 个答案: