JavaScript에서 버튼의 기능 변경

연습을하고있는 동안 W3School에서 JS 연습 중입니다. 두 버튼의 기능을 변경하고 싶었습니다. 내가하고 싶었던 무엇
JavaScript에서 버튼의 기능 변경

는 클릭에 라벨을 교환 할 다른 버튼 "라이트 켜기"를 추가했다 및 온 클릭 행동과 함께 "빛을 끄십시오".

나는 위의 코드를 실행하려고

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

, 그것은 을 클릭에 라벨을 대체 버튼 "나를 클릭하지 마세요"가 아니라 온 클릭 동작을 변경 않습니다!

해당 기능을 얻으려면 도움이 필요합니다.

출처

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

하지만 Button 액션을 사용하면 onclick이 문자열로 매핑되고 그 시간에 작동하므로 왜 document.getElementById ('buttonId2')에서 작동하지 않습니다? onclick? – user308967

JavaScript에서 버튼의 기능 변경

답변

관련 문제