Ändern der Funktionalität der Schaltfläche in JavaScript

Ich übe JS auf W3School, während die Übung "The Light Bulb" Ich wollte die Funktionalität der beiden Tasten ändern! "Schalten Sie das Licht" eine andere Taste, die auf Klick hinzufügen wird vertauschen die Etiketten "Turn On the Light" und zusammen mit den Onclick Aktionen
Ändern der Funktionalität der Schaltfläche in JavaScript

, was ich tun wollte.

<!DOCTYPE html> 
<html> 
<body> 

<h1>What Can JavaScript Do?</h1> 

<p><b><i>JavaScript can change HTML attributes.</i></b></p> 

<p>In this case JavaScript changes the src (source) attribute of an image.</p> 

<!-- Button1 (LHS) --> 
<button id="buttonId1" onclick="document.getElementById('myImage').src='pic_bulboff.gif'">Turn off the light</button> 

<!-- Image of the Bulb --> 
<img id="myImage" src="pic_bulbon.gif" style="width:100px"> 

<!-- Button2 (RHS) --> 
<button id="buttonId2" onclick="document.getElementById('myImage').src='pic_bulbon.gif'">Turn on the light</button> 

<!-- Function to interchange label of both buttons along with the onclick actions --> 
<script> 
function clickButton() { 
    <!-- initially button1 is for switching off the button, changing it to turn-on state --> 
    document.getElementById('buttonId1').innerHTML = 'Turn on the light'; 
    document.getElementById('buttonId1').onclick="document.getElementById('myImage').src='pic_bulbon.gif' " ; 

    <!-- initially button2 is for switching on the button, changing it to turn-off state --> 
    document.getElementById('buttonId2').innerHTML = 'Turn off the Light'; 
    document.getElementById('buttonId2').onclick="document.getElementById('myImage').src='pic_bulboff.gif' " ; 
} 
</script> 


<br> 
<!-- Adding new button to manipulate button functionality --> 
<button onclick="clickButton()" >Do Not Click Me</button> 
</body> 
</html>

ich oben Code auszuführen versucht, das Etikett ersetzt auf klicken Button "Me Do Not Klicken Sie auf" aber nicht ändert nicht die Onclick Aktionen!

Ich brauche Hilfe, um diese Funktionalität zu erreichen.

Quelle

2016-09-15 user308967

Versuchen Sie folgendes:

<!DOCTYPE html> 
 
<html> 
 
<head> 
 

 
<script type="text/javascript"> 
 
function onBulb(){ 
 
    document.getElementById('myImage').src='pic_bulbon.gif'; 
 
} 
 

 
function offBulb(){ 
 
    document.getElementById('myImage').src='pic_bulboff.gif'; 
 
} 
 
function swapButtons(){ 
 
    document.getElementById('buttonId1').innerText="Turn off the light"; 
 
    document.getElementById('buttonId1').onclick=offBulb; 
 
    document.getElementById('buttonId2').innerText="Turn on the light"; 
 
    document.getElementById('buttonId2').onclick=onBulb; 
 
} 
 
</script> 
 

 
</head> 
 
<body> 
 

 
<h1>What Can JavaScript Do?</h1> 
 

 
<p>JavaScript can change HTML attributes.</p> 
 

 
<p>In this case JavaScript changes the src (source) attribute of an image.</p> 
 

 

 
<button id="buttonId1" onclick="onBulb()">Turn on the light</button> 
 

 
<img id="myImage" src="pic_bulboff.gif" style="width:100px"> 
 

 
<button id="buttonId2" onclick="offBulb()">Turn off the light</button> 
 

 
<button onclick="swapButtons()" >Swap Buttons</button> 
 

 

 
</body> 
 
</html>

Quelle

2016-09-15 12:48:31 Samu

verwenden Sie dies stattdessen. . .

document.getElementById('buttonId1').onclick = function() { 
    document.getElementById('myImage').src='pic_bulbon.gif'; 
}; 
document.getElementById('buttonId2').onclick= function() { 
    document.getElementById('myImage').src='pic_bulboff.gif' 
};

Quelle

2016-09-15 12:38:06

Onclick auf eine Funktion gesetzt sein muss, nicht Zeichenfolge ..

function clickButton() { 
 
    document.getElementById('buttonId1').innerHTML = 'Turn on the light'; 
 
    document.getElementById('buttonId1').onclick= function() {functionSwitch(true)} 
 
    document.getElementById('buttonId2').innerHTML = 'Turn off the Light'; 
 
    document.getElementById('buttonId2').onclick= function() {functionSwitch(false)} 
 
} 
 

 
function functionSwitch(state) { 
 
    
 
    if(state == false) 
 
     document.getElementById('myImage').src='https://openclipart.org/image/2400px/svg_to_png/119749/power-off.png'; 
 
    else 
 
     document.getElementById('myImage').src='http://icons.iconarchive.com/icons/paomedia/small-n-flat/1024/sign-check-icon.png'; 
 
}

<body> 
 

 
    <h1>What Can JavaScript Do?</h1> 
 

 
    <p><b><i>JavaScript can change HTML attributes.</i></b> 
 
    </p> 
 

 
    <p>In this case JavaScript changes the src (source) attribute of an image.</p> 
 

 
    <!-- Button1 (LHS) --> 
 
    <button id="buttonId1" onclick='functionSwitch(false)'>Turn off the light</button> 
 

 
    <!-- Image of the Bulb --> 
 
    <img id="myImage" src="http://icons.iconarchive.com/icons/paomedia/small-n-flat/1024/sign-check-icon.png" style="width:100px"> 
 

 
    <!-- Button2 (RHS) --> 
 
    <button id="buttonId2" onclick='functionSwitch(true)'>Turn on the light</button> 
 

 
    <br> 
 
    <!-- Adding new button to manipulate button functionality --> 
 
    <button onclick="clickButton()">Do Not Click Me</button> 
 
</body>

Quelle

2016-09-15 12:53:45

Aber wenn wir Tastenaktion verwendet dann onclick wurde mit einer Zeichenfolge zugeordnet und die Zeit hat es funktioniert, warum es nicht funktioniert für document.getElementById ('buttonId2'). Onclick? – user308967

Ändern der Funktionalität der Schaltfläche in JavaScript

Antwort

Verwandte Themen