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

Question

I have two buttons and I want to store the value attribute of the button pressed into a variable called amount. The code below is clearly wrong I have two identical id's for both buttons. What should I be doing in the function to save the value attribute to the variable amount 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

The attribute id must be unique in a document, use class instead. Also pass this to the function so that you can refer the current button inside the function:

 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

Either give a unique id for each button or completely remove id attribute. After fixing your html try the following code.

 <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

Make sure to have unique Id's.

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