Javascript を使用して、2 つの画像間でオンとオフを切り替えたいと考えています。これまでのところ、カウンターを使用してから、画像がクリックされたときにカウンターが偶数または奇数である場合に基づいて、innerHTML を変更しています。
最初に画像をクリックしたときに、既にそこにある画像を置き換えることで機能しますが、最初に画像を追加した後は代わりに画像を追加し続けます。クリックしたときに画像を追加するのではなく、2回目以降に画像を変更するにはどうすればよいですか?
<!DOCTYPE html>
<html>
<head>
<script>
var x = 0;
function myFunction() {
x++;
var div1 = document.getElementById('div1');
if (x % 2 != 0) {
var y = document.write('<img src="http://www.computric.com/wp-content/uploads/2011/09/119709197585381818TzeenieWheenie_Power_On_Off_Switch_red_2.svg_.med_.ng" alt="sometext" onclick=myFunction()>');
div1.appendChild.innerHtml = y;
} else if (x % 2 == 0) {
var y = document.write('<img src="http://0.tqn.com/d/pcsupport/1/0/Y/A/-/-/on.jpg" alt="some_text" onclick=myFunction()>')
div1.appendChild.innerHTML = y;
}
}
</script>
</head>
<body>
<div id="div1" style="font-size:12px" onclick=myFunction()> <span onclick=myFunction()>
<img src="http://0.tqn.com/d/pcsupport/1/0/Y/A/-/-/on.jpg" alt="some_text">
</span>
</div>
</body>
</html>