Umschalten einer Schaltfläche in JavaScript
In diesem Tutorial wird erläutert, wie Sie eine Schaltfläche mit bedingten Anweisungen in JavaScript umschalten.
Umschalten einer Schaltfläche mit bedingten Anweisungen in JavaScript
Wir können eine Schaltfläche umschalten, indem wir bedingte Anweisungen wie die if-else-Anweisung in JavaScript verwenden. Wir können fast alle Eigenschaften eines Elements wie Wert, Klasse, ID und Farbe in JavaScript umschalten.
Um eine Eigenschaft eines Elements zu ändern, müssen wir das Element mit seiner ID oder Klasse abrufen. Außerdem können wir mithilfe des Eigenschaftsnamens den Eigenschaftswert ändern.
Lassen Sie uns zum Beispiel eine Schaltfläche erstellen und ihren inneren Text mit der Anweisung if-else und der Eigenschaft value ändern. Siehe den Code unten.
<!DOCTYPE html>
<html>
<head></head>
<body>
<form>
<input type="button" id="myButton" value="NO"
onclick="Buttontoggle();">
</form>
</body>
<script type="text/javascript">
function Buttontoggle()
{
var t = document.getElementById("myButton");
if(t.value=="YES"){
t.value="NO";}
else if(t.value=="NO"){
t.value="YES";}
}
</script>
</html>
Im obigen Programm haben wir die Funktion Buttontoggle() erstellt, die jedes Mal aufgerufen wird, wenn der Benutzer auf die Schaltfläche klickt. Es wird den Text innerhalb der Schaltfläche umschalten.
Um diesen Code auszuführen, müssen Sie diesen Code in eine HTML-Datei kopieren und die Datei mit einem beliebigen Browser öffnen, und Sie sehen die Schaltfläche. Auf die gleiche Weise können wir jede Eigenschaft eines Elements umschalten. Wir können auch eine switch-Anweisung anstelle einer if-else-Anweisung verwenden. Lassen Sie uns nun den Text mit einer Schaltfläche und einer if-else-Anweisung umschalten. Siehe den Code unten.
<!DOCTYPE html>
<html>
<head></head>
<body>
<button onclick="Buttontoggle()">Click to Toggle Text</button>
<div id="123">Some Text</div>
</body>
<script type="text/javascript">
function Buttontoggle()
{
var t = document.getElementById("123");
if(t.innerHTML=="Some Text"){
t.innerHTML="Toggled Text";}
else{
t.innerHTML="Some Text";}
}
</script>
</html>
Im obigen Code haben wir eine Schaltfläche verwendet, um den Text eines anderen Elements mithilfe seiner ID umzuschalten. Die Eigenschaft getElementById wird verwendet, um das Element mit seiner ID abzurufen, und die Eigenschaft innerHTML wird verwendet, um den Text des div-Elements abzurufen. Wir können die Klasse eines Elements auch mit der Eigenschaft classList.toggle() umschalten.
Lassen Sie uns zum Beispiel ein Textelement und ein Stylesheet erstellen, in dem wir einige Eigenschaften der Klasse myClass wie Breite, Auffüllung, Hintergrundfarbe, Farbe und Schriftgröße festlegen. Jetzt können wir die Klasse myClass und die Eigenschaft classList.toggle() verwenden, um die Klasse des Elements div umzuschalten. Siehe den Code unten.
<!DOCTYPE html>
<html>
<head></head>
<body>
<button onclick="Buttontoggle()">Click to Toggle Class</button>
<div id="123">Some Text</div>
</body>
<style type="text/css">
.myClass {
width: 50%;
padding: 33px;
background-color: green;
color: white;
font-size: 33px;
}
</style>
<script type="text/javascript">
function Buttontoggle()
{
var t = document.getElementById("123");
t.classList.toggle("myClass");
}
</script>
</html>
Im obigen Programm haben wir eine Schaltfläche erstellt, mit der die Klasse umgeschaltet wird, und ein div-Element, dessen Klasse umgeschaltet wird. Wir haben das Stylesheet verwendet, um einige Eigenschaften der Klasse festzulegen, die auf den Text angewendet werden, wenn auf die Umschaltfläche geklickt wird.
