Кнопка привязки к случаю / действию Javascript

Question

Кнопка привязки к случаю / действию Javascript

0

Я новичок в Javascript, и у меня возникают большие проблемы. У меня есть некоторые функции, которые я могу ввести в текстовое поле и нажать enter, и функции будут работать. Но я создал 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" мне нужно связать.. Извините, не все в коде это английский, но это должно быть понятно..

user3414678 13 март 2014, в 11:43

Источник

0

Вы можете привязать свою клавишу со стрелкой к функции JavaScript [ stackoverflow.com/questions/1402698/… [1]: stackoverflow.com/questions/1402698/…
Gus de Boer 13 март 2014, в 10:04

Теги:

javascript

jquery

html

button

function

4 ответа

Ещё вопросы

Вы можете привязать свою клавишу со стрелкой к функции JavaScript [ stackoverflow.com/questions/1402698/… [1]: stackoverflow.com/questions/1402698/…

fcalderan · Answer 1 · 2014-03-13T08-25-00.000Z

Вместо использования встроенных обработчиков (неправильная практика) или нескольких обработчиков для каждой кнопки я бы использовал делегирование делегирования на вашей обертке кнопок, например

$('#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 команды, и они вверх, вниз, вправо и влево, я хочу связать их с кнопкой ..

CREE7EN · Answer 2 · 2014-03-13T07-19-00.000Z

скрипка

Вы можете просто написать имя функции, которое вы определили для кнопок, в атрибут onclick, например:

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

Однако, поскольку у ваших кнопок уже есть идентификатор, вы также можете проверить, был ли один из этих идентификаторов нажат без необходимости использования onclick в вашей разметке:

JavaScript:

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

JQuery:

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

Это действительно имеет смысл, но я не могу заставить его работать на самом деле ... У меня есть текстовое поле, в котором я могу написать несколько команд и нажать клавишу ввода. Тогда команды работают нормально. Но вместо того, чтобы писать, я хочу просто нажать кнопку, а затем запускается командный блок .. Не уверен, что это имеет какой-то смысл, но все в скрипте js в первом посте .. Спасибо за ваше время!

Vara Prasad · Answer 3 · 2015-11-28T04-52-00.000Z

Я думаю, что эти ниже изменения дадут вам решение. Вместо первой кнопки вам нужно привязать события ко всем кнопкам, которые вам нужны. В настоящее время 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);
    }
}

Aju Mon · Answer 4 · 2014-03-13T07-09-00.000Z

0

Просьба передать имя функции внутри тега OnClick

например, если вы хотите связать функцию playGame с кнопкой DOWN

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

Aju Mon 13 март 2014, в 07:09

0

Это не работает .. я думаю, что это как-то связано с тем, что вы не знаете текстовый ввод ... как вы можете видеть здесь, я надеюсь: function playGame () {// Получить входные данные игрока и преобразовать их в строчные буквы PlayersInput = input .стоимость; PlayersInput = PlayersInput.toLowerCase ();
user3414678 13 март 2014, в 10:15