Javascript: изменение переменной при нажатии кнопки

Вопрос:

У меня есть файл javascript, связанный с index.html, как показано ниже:

<script src=’game.js’ type=’text/javascript’> </script>

Предположим, что game.js содержит:

var speed = …;

Наряду с некоторым другим контентом.

У меня есть 3 кнопки на странице HTML, которые при нажатии меня хотят изменить переменную speed в javascript. После нажатия кнопки я хочу, чтобы все 3 кнопки были отключены или скрыты до тех пор, пока не будет нажата кнопка reset. Любая идея, как я это делаю?

Ответ №1

Используя чистый HTML/JavaScript, вот что я буду делать:

<form name=»form1″> <span id=»buttons»> <input type=»button» name=»button1″ value=»Speed1″/> <input type=»button» name=»button2″ value=»Speed2″/> <input type=»button» name=»button3″ value=»Speed3″/> </span> <input name=»reset» type=»reset»/> </form> <script type=»text/javascript»> var speed, buttonsDiv=document.getElementById(«buttons»); for (var i=1; i<=3; i++) { var button = document.form1[«button» + i]; button.onclick = function() { speed = this.value; alert(«OK: speed=» + speed); buttonsDiv.style.display = ‘none’; }; } document.form1.reset.onclick = function() { speed = null; alert(«Speed reset!»); buttonsDiv.style.display = ‘inline’; return true; }; </script>

Вот рабочий пример: http://jsfiddle.net/maerics/TnTuD/

Ответ №2

Создавайте функции в файлах javascript, которые присоединяются к событиям click каждой кнопки.

Функции изменят требуемую переменную.

aButtonelement.addEventListener(‘click’,functionToChangeVariable,false) Ответ №3

Самый простой способ – использовать jQuery.

$(«#idofbutton»).click(function () { // change variables here });

Или вы можете зарегистрировать событие:

document.getElementById(«idofbutton»).addEventListener(‘click’, function () { // change variables here }, false);

Источник

Ответ №4

Включите в свой файл Javascript следующее:

function DisableButtons() { speed = 100; document.getElementById(«btn_1»).disabled = true; document.getElementById(«btn_2»).disabled = true; document.getElementById(«btn_3»).disabled = true; } function EnableButtons() { document.getElementById(«btn_1»).disabled = false; document.getElementById(«btn_2»).disabled = false; document.getElementById(«btn_3»).disabled = false; }

В вашем HTML назначьте следующие события onClick:

<button onClick=»DisableButtons();»>Button 1</button> <button onClick=»DisableButtons();»>Button 2</button> <button onClick=»DisableButtons();»>Button 3</button> <button onClick=»EnableButtons();»>Reset</button> Ответ №5

что-то вроде этого? http://jsfiddle.net/qMRmn/

В принципе, speed – глобальная переменная, и нажатие кнопки класса class set-speed устанавливает скорость в новое значение и отключает все кнопки set-speed. При нажатии кнопки reset они будут повторно активированы.

Код должен быть достаточно понятным.