如何获得几个按钮的一个值？ "Uncaught TypeError: Cannot read property"

Question

我想获取我创建的四个按钮之一的值。我尝试像下面的代码一样执行此操作，当我使用控制台时它工作正常.log但是当我只想返回我得到的值时："未捕获的类型错误：无法读取方向未定义的属性'id'(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);   
}

Answer 1

当您在元素的onclick event中传递function(this)时，您真正传递的是元素，而不是事件，因此您希望直接访问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>

Answer 2

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

这应该形成您正在寻找的内容。

Answer 3

老实说，从我所看到的情况来看，这应该可以正常工作，但由于某种原因，您传递给事件处理程序的this是未定义的。话虽如此，由于几个原因，您正在做的事情是非常多余和不好的做法。

1. 无需将目标元素传递给事件处理程序，因为这已包含在事件对象中。
2. 不应将事件处理程序参数命名为 event ，因为这将覆盖事件处理程序上下文中包含的事件对象(请参阅此处(。

因此，在这种情况下，最好更改为：

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

function direction(){
    console.log(event.target.value);   
}