Bind button to a Javascript case/action

Question

I am new to Javascript, and i run into some big problems. I got some functions, which I can type into a text field and press enter, and the functions works. But i have created 4 buttons, which i want to connect to the actions.. i got 4 actions: "UP","DOWN","LEFT" and "RIGHT".

This is the js fiddle over my code: http://jsfiddle.net/n24gQ/

I have made the buttons like this but I dont know what to write inside the OnClick tag?

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

I hope you can understand what my problem is. I made 4 javascript cases which I want to bind to 4 html buttons if possible.. :) It is the cases: "frem" "tilbage" "hoejre" and "venstre" i need to bind.. Sorry not everything in the code is english, but it should be understandable..

You can bind your arrow key to a javascript function [http://stackoverflow.com/questions/1402698/binding-arrow-keys-in-js-jquery][1] [1]: http://stackoverflow.com/questions/1402698/binding-arrow-keys-in-js-jquery — Gus de Boer, Mar 13 '14 at 10:04

score 1 · Answer 1 · answered Mar 13 '14 at 10:04

1

Fiddle

You can simply write the function name you've defined for the buttons into the onclick attribute, e.g. like this:

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

However, as your buttons already have id's you can also check if one of those id's got clicked without the need of onclick in your markup:

JavaScript:

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

jQuery:

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

answered Mar 13 '14 at 10:04

CREEATION

232
1
10

This makes good sense really, but I cant get it to work really.. I got a text field which i can write some commands and press enter. Then the commands works fine. But instead of writing, i want just to push a button and then the command case runs.. Not sure it makes any sense tho, but everything is in the js fiddle in the first post.. Thanks for your time! – user3414678 Mar 13 '14 at 10:12

score 1 · Answer 2 · answered Mar 13 '14 at 10:08

1

Instead of using inline handlers (bad practice) or multiple handlers for each button, I would use event delegation on your button wrapper, like so

$('#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;

    }
});

answered Mar 13 '14 at 10:08

Fabrizio Calderan

120,726
26
164
177

I guess this is the way to go, didn't know you could do it like this. – CREEATION Mar 13 '14 at 10:12
this looks great but where should i put it? and this is JQuery code right? Now i have a textfield, where i can enter some commands. but because i only have 4 commands and they are up,down,right and left i want to bind them to a button.. – user3414678 Mar 13 '14 at 10:19

Aju Mon · Answer 3 · 2014-03-13T10:25:39.717

0

Please pass the function name inside the OnClick tag

for example if you want to associate playGame function to DOWN button write

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

edited Mar 13 '14 at 10:25

answered Mar 13 '14 at 10:05

Aju Mon

225
2
15

That is not working.. i think it has something to do with that is dosent know the text input.. as you can see here i hope: function playGame() { //Get the player's input and convert it to lowercase playersInput = input.value; playersInput = playersInput.toLowerCase(); – user3414678 Mar 13 '14 at 10:15

score 0 · Answer 4 · answered Nov 28 '15 at 06:17

I think these below changes will give you solution. Instead of the first button, you need to bind events to all of the buttons which you required. Currently, querySelector() getting only first button to bind events. So, use querySelectorAll()

Replace this code

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

With below code

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);
    }
}

Bind button to a Javascript case/action

4 Answers4