Question

我是Javascript的新手，我遇到了一些大问题。我有一些功能，我可以在文本字段中输入并按回车键，功能正常。但我创建了4个按钮，我想连接到动作..我有4个动作：＆＃34; UP＆＃34;，＆＃34; DOWN＆＃34;，＆＃34; LEFT＆＃34;和＆＃34;正确＆＃34;。

这是我的代码中的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按钮。:)这是案例：＆＃34; frem＆＃34; ＆＃34; tilbage＆＃34; ＆＃34; hoejre＆＃34;和＆＃34; venstre＆＃34;我需要绑定..对不起，代码中的所有内容都不是英文，但它应该是可以理解的..

Answer 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());

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

    }
});

Answer 3

请在OnClick标记内传递函数名称

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

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

Answer 4

我认为以下这些变化将为您提供解决方案。您需要将事件绑定到所需的所有按钮，而不是第一个按钮。目前，indexPairs(1,2)只获得第一个绑定事件的按钮。因此，请使用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);

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

4 个答案: