Кнопка переключения JavaScript не меняет состояние кнопки
У меня есть кнопка, при нажатии на которую я хотел бы, чтобы текст менялся с ON на OFF (переключение). Однако я не могу заставить JavaScript сделать это. Что мне не хватает?
HTML
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<meta name = "viewport" content = "width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<script src = "testButton.js"></script>
<style>
button {
padding-top: 30px;
}
</style>
<body>
<div align = "center">
<button id = "toggle">Turn on</button>
</div>
</body>
</html>
JS
$(document).ready(function() {
$('#toggle').on('click', function(e){
let status;
if ($(this).text() == 'Turn on') {
$(this).text('Turn off')
status = 'on';
} else {
$(this).text('Turn off');
status = 'off';
}
e.preventDefault();
});
});
Ответы 1
Просто сделал несколько изменений. Я взял вашу идею со сравнением текста элемента, это мое решение1. Но я бы рекомендовал использовать логическую переменную, я видел, что у вас есть статус этой переменной. Вы можете использовать это как переключатель 2.
1.) В одном я сравниваю переменную состояния, если она истинна, тогда я устанавливаю текст «выключить» и устанавливаю статус в ложь; Когда переменная состояния имеет значение false, я устанавливаю для текста значение «включить» и устанавливаю для состояния значение true.
2.) В двух случаях я просто сравниваю текст элемента, когда он «Включен», затем я устанавливаю текст в «Выключить» и наоборот.
Вот первый пример. 1.) Вот лучшее решение с логической переменной
let status = true;
$(document).ready(function() {
$('#toggle').on('click', function(e){
if (status === true) {
$(this).text('Turn off')
status = false;
} else if (status === false) {
$(this).text('Turn on')
status = true;
}
e.preventDefault();
});
});<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<meta name = "viewport" content = "width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<script src = "testButton.js"></script>
<style>
button {
padding-top: 30px;
}
</style>
<body>
<div align = "center">
<button id = "toggle">Turn on</button>
</div>
</body>
</html>Сравнение текста 2.)
$(document).ready(function() {
$('#toggle').on('click', function(e){
if ($(this).text() === 'Turn on') {
$(this).text('Turn off')
} else {
$(this).text() === 'Turn off';
$(this).text('Turn on')
}
e.preventDefault();
});
});<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<meta name = "viewport" content = "width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<script src = "testButton.js"></script>
<style>
button {
padding-top: 30px;
}
</style>
<body>
<div align = "center">
<button id = "toggle">Turn on</button>
</div>
</body>
</html>Ahja :D Я также изменил else на else if для проверки, может быть, его легче понять, и вы можете добавить часть else для недопустимых аргументов, может быть, если произойдет что-то странное, чтобы поймать это, например else{throw new Error("Something Weird Happened"}
Ууууу! Спасибо. Я забыл добавить ссылку на jQuery.