[英]I am trying to make a simple toggle button in javascript
我正在嘗試在 javascript 中制作一個簡單的切換按鈕。 但是，按鈕只會轉“OFF”，不會轉回“ON”
<html><head></head>
<script type="text/javascript">
function toggle(button)
{
if(document.getElementById("1").value=="OFF"){
document.getElementById("1").value="ON";}
if(document.getElementById("1").value=="ON"){
document.getElementById("1").value="OFF";}
}
</script>
<body>
<form action="">
<input type="button" id="1" value="ON" style="color:blue"
onclick="toggle(this);">
</form></body></html>
我正在運行：HP 上網本：Ubuntu Linux 10.04：適用於 Ubuntu 1.0 的 Firefox。
如果要查找它，為什么要傳遞按鈕？
此外，由於您知道可能的值，您只需要檢查它是否為 OFF，否則，您知道它為 ON。
// Toggles the passed button from OFF to ON and vice-versa.
function toggle(button) {
if (button.value == "OFF") {
button.value = "ON";
} else {
button.value = "OFF";
}
}
如果您想花哨並節省幾個字節，可以使用三元運算符：
function toggle(b){b.value=(b.value=="ON")?"OFF":"ON";}
當您更改值然后立即再次讀取並將其更改回時，您的兩個if語句都將一個接一個地執行：
function toggle(button)
{
if(document.getElementById("1").value=="OFF"){
document.getElementById("1").value="ON";}
else if(document.getElementById("1").value=="ON"){
document.getElementById("1").value="OFF";}
}
在其中添加else應該可以阻止這種情況的發生。
另一種方法是：
var button = document.querySelector("button");
var body = document.querySelector("body");
var isOrange = true;
button.addEventListener("click", function() {
if(isOrange) {
body.style.background = "orange";
}else {
body.style.background = "none";
}
isOrange = !isOrange;
});
在JavaScript文件中。
/*****
筆記！ 另一種方法是將類應用於我們想要更改的元素。
CSS文件必須具有我們想要的格式的類：
.orange {
background: orange;
}
最后在我們的js文件中，我們只需要應用這個類：
var button = document.querySelector("button");
button.addEventListener("click", function() {
document.body.classList.toggle("orange");
});
問候 ：）
為什么不用開關？
function toggle(button)
{
switch(button.value)
{
case "ON":
button.value = "OFF";
break;
case "OFF":
button.value = "ON";
break;
}
}
<html>
<head>
<script type="text/javascript">
function toggle(button)
{
if(document.getElementById("1").value=="OFF")
{
document.getElementById("1").value="ON";
}
else
{
document.getElementById("1").value="OFF";
}
}
</script>
</head>
<body>
<form action="">
<input type="button" id="1" value="ON" style="color:blue" onclick="toggle(this);">
</form>
</body>
</html>
這將解決您的問題。
let isOn = true;
function toggle(button) {
isOn = !isOn;
if (isOn) {
document.getElementById("1").value = "ON";
} else {
document.getElementById("1").value = "OFF";
}
}
我正在嘗試在 javascript 中制作一個簡單的按鈕來做兩件事
[英]I am trying to make a simple button in javascript doing two stuff
我試圖用javascript單擊按鈕時顯示表單
[英]I am trying to make a form display when button is clicked with javascript
我該怎么辦？ 我正在嘗試使javascript中的圖像成為按鈕
[英]How would i do this? I am trying to make an image in javascript be a button
我正在嘗試制作一個簡單的點擊游戲，但全局變量不起作用
[英]I am trying to make a simple clicker game, but the global variable will not work
我正在嘗試使用 React js 在電話簿應用程序上創建一個刪除按鈕
[英]I am trying to make a delete button on phonebook app with React js
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.