Моя кнопка не меняет функции
Мне было интересно, почему кнопка не меняется на другую функцию, когда кнопка становится красной при нажатии на нее второй раз.
Моя цель - иметь одну кнопку, которая будет менять функцию в зависимости от того, нажали ли вы ее один раз.
<!DOCTYPE html>
<html>
<head>
<style>
#hello {
padding: 30px 60px;
background-color: #4db8ff;
width: 100px;
text-align: center;
margin-left: auto;
margin-right: auto;
cursor: pointer;
color: white;
font-family: arial;
font-size: 20px;
}
</style>
</head>
<body>
<div id = "hello" onclick = "button()">START</div>
</body>
<script>
var x = true;
if (x == true) {
function button() {
x = false;
alert("once");
}
}
if (x == false) {
function button() {
alert("twice");
document.getElementById("hello").style.background = "#ff3333";
}
}
</script>
</html>
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Вы условно создаете при загрузке страницы одно из двух возможных определений функции. Второе определение не заменит первое только потому, что в какой-то момент вы переназначили логический флаг.
Создайте единственную функцию, которая проверяет состояние x изнутри:
function button() {
if (x) { // Comparing against true is redundant
x = false;
alert("once");
} else {
alert("twice");
document.getElementById("hello").style.background = "#ff3333";
}
}
@Simon Все, что if проверяет, можно ли считать то, что было дано, "истинным". Когда вы пишете x == true, возвращается либо true, либо false. Сам по себе x уже равен true или false, поэтому вам не нужна часть == true.
Хорошо, понял. Большое спасибо
@Simon Нет проблем. Убедитесь, что вы действительно понимаете условие для if, while и других конструкций, а также то, как они используют значения, которые вы им задаете. Вы будете использовать их постоянно, поэтому важно хорошо их понимать.
Ваша функция button() определяется только один раз. Вы не можете определить функцию на основе условия, она будет определена, как только будет выполнен окружающий ее код. Таким образом, вам нужно разместить операторы if внутри функции.
<!DOCTYPE html>
<html>
<head>
<style>
#hello {
padding: 30px 60px;
background-color: #4db8ff;
width: 100px;
text-align: center;
margin-left: auto;
margin-right: auto;
cursor: pointer;
color: white;
font-family: arial;
font-size: 20px;
}
</style>
</head>
<body>
<div id = "hello" onclick = "button()">START</div>
</body>
<script>
var x = true;
function button(){
if (x) {
x = false;
alert("once");
} else {
alert("twice");
document.getElementById("hello").style.background = "#ff3333";
}
}
</script>
</html>Большое спасибо за ответы. Я обязательно добавлю это в свой проект
@Simon Нет проблем.
Спасибо за ответ. Просто тесто для размышлений, что это значит, когда вы помещаете одну переменную x / вот так?