javascript - 如何获得几个按钮的一个值？ “未捕获的TypeError:无法读取属性”

我想获得我创建的四个按钮之一的值。我尝试按照下面的代码进行操作，当我使用console.log时，它可以正常工作，但是当我只想返回值时，我得到：“未捕获的TypeError：无法读取方向（script.js： 16）”

有什么想法如何处理吗？

<div class="dirButtons">
    <input type="button" id="right" class="button" name="direction" value="to right" onclick="direction(this)">
    <input type="button" id="left" class="button" name="direction" value="to left" onclick="direction(this)">
    <input type="button" id="bottom" class="button" name="direction" value="to bottom" onclick="direction(this)">
    <input type="button" id="top" class="button"name="direction" value="to top" onclick="direction(this)">
</div>

function direction(event){
    console.log(document.getElementById(event.id).value);
}

最佳答案

当您在元素的function(this)中传递onclick event时，您真正传递的是元素而不是事件，因此您想直接访问element's value。

function direction(element){
    console.log(element.value);
}

<div class="dirButtons">
    <input type="button" id="right" class="button" name="direction" value="to right" onclick="direction(this)">
    <input type="button" id="left" class="button" name="direction" value="to left" onclick="direction(this)">
    <input type="button" id="bottom" class="button" name="direction" value="to bottom" onclick="direction(this)">
    <input type="button" id="top" class="button"name="direction" value="to top" onclick="direction(this)">
</div>

关于javascript - 如何获得几个按钮的一个值？ “未捕获的TypeError:无法读取属性”，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/55461419/