Make-Taste sichtbar durch js Variable

Question

Ist es möglich, eine Schaltfläche in HTML sichtbar, wenn eine Variable in Javascript zu machen wahr ist

ex Code: var systemON = true;

Und wenn SystemOn wahr ist, möchte ich einen Knopf zu sein sichtbar in HTML.

Answer 1

gut, ja ..

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

jetzt bin nicht sicher, wenn das das ist, was Sie wollen, oder Sie die Sichtbarkeit jedes t umschalten Ändern sich die Variablen in Ihrem Code?

Answer 2

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

sollte es tun

Answer 3

Ich ziehe ein ternäres boolean?when_true:when_false; verwendet, die für eine Abkürzung ist

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

Dann die Erklärung unter der Annahme, nach der Taste wird im DOM verfügbar ausgeführt wird Sie die Anzeige einstellen wie folgt:

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

mit CSS

#buttonID { display:none } 

---

Wenn Sie die Taste Raum auf der Seite noch zu nehmen, verwenden

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

mit CSS

#buttonID { visibility:hidden } 

Answer 4

starten: https://jsfiddle.net/820dzf3j/

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

Answer 5

Hier haben Sie einen Beispielcode, der tut, was Sie fragen:

FIDDLE

var systemON = true; 
 

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

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

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

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

ich mit diesem Code eine Schaltfläche sichtbar und versteckt zu machen, wenn

HTML benötigt:

<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"; 
    }