Javascript 按钮和getElementsByName来查找值

我正在使用一组按钮，如下所示：

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

但这总是回显第一个按钮的值，而不是所选按钮的值。

---

如何获取所选按钮的值？

您需要在验证函数中将单击的按钮引用传递为

此

，然后使用它获取单击的按钮值，如下所示-

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

14,5
29,0
43,5
58,0
72,5
功能验证（ele）{
控制台日志（元素值）；
console.log（ele.innerText）；
}

您需要在validate函数中将点击按钮引用传递为

此

，然后使用它获得点击按钮值，如下所示-

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

14,5
29,0
43,5
58,0
72,5
功能验证（ele）{
控制台日志（元素值）；
console.log（ele.innerText）；
}

为什么不能使用document.getElementByID（'ID'）

document.getElementsByName（'height'）[0]

-这是第一个按钮，请查看其索引0。@然后我再也不需要为每个按钮使用单独的代码了？为什么不能使用document.getElementByID（'ID'）

document.getElementsByName（'height'）[0]

-这是第一个按钮，请查看其索引0。@再也不需要为每个按钮指定单独的代码了？