store value from button in variable using 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>

I have two identical id's for both buttons That is invalid HTML. Fix that first. You also need to invoke the functions properly in the attribute, or, even better, attach the listeners properly using Javascript instead. — CertainPerformance
– CertainPerformance, Commented Oct 7, 2018 at 4:43

Mamun · Accepted Answer · 2018-10-07 04:53:41Z

4

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>

edited Oct 7, 2018 at 4:53

answered Oct 7, 2018 at 4:45

Mamun

69k9 gold badges51 silver badges62 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

NewToJS Over a year ago

Why bother with .getAttribute('value'); why not just use el.value?

Mamun Over a year ago

@NewToJS, I was trying not to change OP's code much ..... though added that as part of the answer........thanks.

NewToJS Over a year ago

Understandable but since your answer update I believe this is now a better solution. +1

Mamun Over a year ago

@NewToJS, thanks for helping me to improve the answer :)

NewToJS Over a year ago

One last thing, you can no doubt remove the class attribute since it isn't really being used. Also, you are welcome :)

|

rohitwtbs · Accepted Answer · 2018-10-07 05:14:24Z

1

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>

answered Oct 7, 2018 at 5:14

rohitwtbs

5691 gold badge5 silver badges19 bronze badges

Comments

Chayan · Accepted Answer · 2018-10-07 08:36:03Z

1

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>

edited Oct 7, 2018 at 8:36

answered Oct 7, 2018 at 4:52

Chayan

6146 silver badges12 bronze badges

Collectives™ on Stack Overflow

store value from button in variable using javaScript

3 Answers 3

6 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related