按钮和getElementsByName查找值

Question

I am using a group of buttons like this:

<div class="btn-group">
<button type="button" class="btn btn-default" id="height_1" name="height" value="1" data-preview="preview_hl_height" onkeyup="validate()" onclick="validate()">14,5</button>
<button type="button" class="btn btn-default" id="height_2" name="height" value="2" data-preview="preview_hl_height" onkeyup="validate()" onclick="validate()">29,0</button>
<button type="button" class="btn btn-default" id="height_3" name="height" value="3" data-preview="preview_hl_height" onkeyup="validate()" onclick="validate()">43,5</button>
<button type="button" class="btn btn-default" id="height_4" name="height" value="4" data-preview="preview_hl_height" onkeyup="validate()" onclick="validate()">58,0</button>
<button type="button" class="btn btn-default" id="height_5" name="height" value="5" data-preview="preview_hl_height" onkeyup="validate()" onclick="validate()">72,5</button>
</div>

I have been trying to find the value of the selected button with:

document.getElementsByName('aantal_planken')[0].value = document.getElementsByName('height')[0].value;

but this always echoing the value of the first button instead of the selected button. How to get the value of the selected button?

Answer 1

You need to pass clicked button reference as this in validate function and then use it to get the clicked button value as follows -

<div class="btn-group">
<button type="button" class="btn btn-default" id="height_1" name="height" value="1" data-preview="preview_hl_height" onkeyup="validate(this)" onclick="validate(this)">14,5</button>
<button type="button" class="btn btn-default" id="height_2" name="height" value="2" data-preview="preview_hl_height" onkeyup="validate(this)" onclick="validate(this)">29,0</button>
<button type="button" class="btn btn-default" id="height_3" name="height" value="3" data-preview="preview_hl_height" onkeyup="validate(this)" onclick="validate(this)">43,5</button>
<button type="button" class="btn btn-default" id="height_4" name="height" value="4" data-preview="preview_hl_height" onkeyup="validate(this)" onclick="validate(this)">58,0</button>
<button type="button" class="btn btn-default" id="height_5" name="height" value="5" data-preview="preview_hl_height" onkeyup="validate(this)" onclick="validate(this)">72,5</button>
</div>
<script type="text/javascript">
function validate(ele) {
    console.log(ele.value);
    console.log(ele.innerText);
}
</script>