将按钮绑定到 Javascript 案例/操作答案

【问题标题】：Bind button to a Javascript case/action将按钮绑定到 Javascript 案例/操作
【发布时间】：2014-03-13 09:57:26
【问题描述】：

我是 Javascript 新手，遇到了一些大问题。我有一些功能，我可以在文本字段中输入并按回车，这些功能就可以工作了。但是我已经创建了 4 个按钮，我想将它们连接到动作。我有 4 个动作：“UP”、“DOWN”、“LEFT”和“RIGHT”。

这是我的代码中的 js 小提琴：http://jsfiddle.net/n24gQ/

我已经制作了这样的按钮，但我不知道在 OnClick 标记内写什么？

<div id="gamebuttons">
    <button id="up" button onClick="">UP</button>
    <button id="down" button onClick="">DOWN</button>
    <button id="left" button onClick="">LEFT</button>
    <button id="right" button onClick="">RIGHT</button>
    </div>

希望您能理解我的问题所在。我做了 4 个 javascript 案例，如果可能的话，我想绑定到 4 个 html 按钮.. :) 我需要绑定的案例是：“frem”“tilbage”“hoejre”和“venstre”。对不起，不是代码中的所有内容是英文的，但应该可以理解..

【问题讨论】：

您可以将箭头键绑定到 javascript 函数 [stackoverflow.com/questions/1402698/… [1]: stackoverflow.com/questions/1402698/…

标签： javascript jquery html function button

【解决方案1】：

Fiddle

您可以简单地将您为按钮定义的函数名称写入 onclick 属性，例如像这样：

<button id="up" type="button" onclick="alert('UP'); return false;">UP</button>

但是，由于您的按钮已经有 id，您还可以检查其中一个 id 是否被点击，而无需在您的标记中添加 onclick：

JavaScript：

var buttonUp = document.getElementById('up');
buttonUp.onclick = function() { myFunction(); return false; }

jQuery：

$('#up').on('click', myFunction());

【讨论】：

这真的很有意义，但我不能让它真正工作。我有一个文本字段，我可以写一些命令并按 Enter。然后命令工作正常。但是我不想写，我只想按下一个按钮，然后命令案例运行..不确定这是否有意义，但一切都在第一篇文章中的 js fiddle.. 感谢您的时间！

【解决方案2】：

我不会对每个按钮使用内联处理程序（不好的做法）或多个处理程序，而是在按钮包装器上使用事件委托，就像这样

$('#gamebuttons').on('click', 'button', function() {

    /* get the id attribute of the clicked button */
    var button_id = this.id; 

    case (button_id) {

        "UP" : /* code for up button */ break;
        "DOWN" : /* code for down button */ break;
        "LEFT" : /* code for left button */ break;
        "RIGHT" : /* code for right button */ break;

    }
});

【讨论】：

我想这是要走的路，不知道你可以这样做。
这看起来不错，但我应该把它放在哪里？这是 JQuery 代码吗？现在我有一个文本字段，我可以在其中输入一些命令。但是因为我只有 4 个命令并且它们是向上、向下、向右和向左，所以我想将它们绑定到一个按钮..

【解决方案3】：

请在 OnClick 标签内传递函数名

例如，如果您想将 playGame 功能关联到 DOWN 按钮写

<button id="down" onclick="playGame();">DOWN</button>

【讨论】：

这不起作用..我认为这与不知道文本输入有关..你可以在这里看到我希望：function playGame() { //获取玩家的输入并将其转换为小写 playerInput = input.value;玩家输入 = 玩家输入.toLowerCase();

【解决方案4】：

我认为以下这些更改将为您提供解决方案。您需要将事件绑定到您需要的所有按钮，而不是第一个按钮。目前，querySelector() 只获得第一个按钮来绑定事件。所以，使用querySelectorAll()

替换此代码

var button = document.querySelector("button");
button.style.cursor = "pointer";
button.addEventListener("click", clickHandler, false);
button.addEventListener("mousedown", mousedownHandler, false);
button.addEventListener("mouseout", mouseoutHandler, false);

下面的代码

var gamebuttonslist=document.querySelectorAll("#gamebuttons button");
for (var vitem=0;vitem<gamebuttonslist.length;vitem++) {
    if (typeof gamebuttonslist[vitem] != "undefined" && gamebuttonslist[vitem] != null) {
        gamebuttonslist[vitem].style.cursor = "pointer";
        gamebuttonslist[vitem].addEventListener("click", clickHandler, false);
        gamebuttonslist[vitem].addEventListener("mousedown", mousedownHandler, false);
        gamebuttonslist[vitem].addEventListener("mouseout", mouseoutHandler, false);
    }
}

【讨论】：