Question

如果Javascript中的变量为真，可以在html中显示一个按钮

前代码：var systemON = true;

如果systemON为true，我想在html中看到一个按钮。

Answer 1

我更喜欢使用三元boolean?when_true:when_false;，这是

的简写

if (boolean) {
  when_true;
}
else {
  when_false;
}

然后假设在DOM中按钮可用后执行语句，您可以设置如下显示：

document.getElementById("buttonID").style.display=systemON?"‌":"none"; // or "block":"none"

使用CSS

#buttonID { display:none }

如果您希望按钮仍占用页面空间，请使用

document.getElementById("buttonID").style.visibility=systemON?"‌visible":"hidden";

使用CSS

#buttonID { visibility:hidden }

Answer 2

if (systemON) {
  document.getElementById("button").style.display = "none";
} else {
  document.getElementById("button").style.display = "block";
}

应该这样做

Answer 3

嗯，是的..

if (sistemON) {
  document.getElementById("yourButtonID").style.display = "block";
}

现在我不确定这是否是您想要的，或者您每次变量在代码中更改时切换可见性？

Answer 4

试试这个：https://jsfiddle.net/820dzf3j/

var systemON = false;
var button = document.getElementById("myButton");
if(systemON) {
button.style.visibility = "hidden";
}

Answer 5

这里有一个示例代码可以满足您的要求：

FIDDLE

＆＃13;

var systemON = true;

if (systemON) {
  document.getElementById("elementToShow").className = "showClass";
} else {
  document.getElementById("elementToShow").className = "hideClass";
}

＆＃13;

.showClass {
  display: block;
}
.hideClass {
  display: none;
}

＆＃13;

<div id="elementToShow" class="hideClass">
  Show me!
</div>

＆＃13;

Answer 6

var systemON = false;

// checks if it is true
if (systemON) {
  document.getElementById("button1").style.display = "block";
} 
// checks if it is false
else { 
  document.getElementById("button1").style.display = "none";
}

var systemOFF = true;

// checks if it is true
if (systemOFF) {
  document.getElementById("button2").style.display = "block";
} 
// checks if it is false
else { 
  document.getElementById("button2").style.display = "none";
}

<button id="button1">Hidden</button>
<button id="button2">Displayed</button>

Answer 7

我使用此代码在需要时显示和隐藏按钮

HTML：

<div class="system" id="SystemButton">
   <p>System Runtime <span id="runtime"></span></p>
   <p>System Failures: <span id="failures"></span></p>
   <p><button id="Shutdown" onclick="systemDown(1)">Shutdown System</button></p>
</div>

JS：

var systemON = true;
if(systemON == true){
    document.getElementById('systemButton').style.display = "block";
}else{
    document.getElementById('systemButton').style.display = "none";
  }

通过js变量使按钮可见

7 个答案: