在JavaScript中更改按钮的功能

我在W3School上练习JS，同时尝试"The Light Bulb"练习我想更改两个按钮的功能！
在JavaScript中更改按钮的功能

什么，我想要做的是添加另一个按钮，在点击将互换标签“开灯”和“关灯”用的onclick行动一起。

<!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>

我试图执行上面的代码，它会替换上点击标签“请勿点击我”按钮，但没有改变的onclick行动！

我需要帮助来实现该功能。

来源

2016-09-15 user308967

试试这个：

<!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>

来源

2016-09-15 12:48:31 Samu

用来代替。。。

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

来源

2016-09-15 12:38:06

的onclick必须设置好的一个函数，不串..

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>

来源

2016-09-15 12:53:45

但是，当我们使用按钮动作，然后onclick被映射与一个字符串和那个时候它的工作，为什么它不适用于document.getElementById（'buttonId2'）。onclick？ – user308967

在JavaScript中更改按钮的功能

回答

相关问题