javascript - 多次更改 onclick() 函数(背景图像更改)

Question

四处搜索了一下试图找到答案(以及我是否能做到这一点)。

我有一些 HTML 和 JavaScript 可以根据用户是女性还是男性来更改背景图像。

默认情况下，页面加载男性背景并提供一个按钮，单击时调用 bgChangeFemale():

<img src="BackgroundMale.png" id="backgroundImage" style="position:absolute; z-index:-1;"/>

<div id="gameContent">

    <div class="logo">

        <a id="genderButton" class="myButton" onclick="bgChangeFemale()" style="float:left; width:60px; height:10px; padding-top:5px; margin-top:10px; margin-left:0px; padding-left:12px; padding-right:30px;">Female?</a>

<script>            
 function bgChangeFemale() {
  document.getElementById("backgroundImage").src = "BackgroundFemale.png";
  document.getElementById("genderButton").innerHTML = "Male?";
  document.getElementById("genderButton").style.width = "40px";
  document.getElementById("genderButton").onclick = "bgChangeMale()";
}

 function bgChangeMale() {
  document.getElementById("backgroundImage").src = "BackgroundMale.png";
  document.getElementById("genderButton").innerHTML = "Female?";
  document.getElementById("genderButton").style.width = "60px";
  document.getElementById("genderButton").onclick = "bgChangeFemale()";
}

第一个按钮/功能完全没有问题，并将背景图像更改为女性版本。但是，当我再次单击按钮将其更改回 Male 时，没有任何反应。我是做错了什么还是无法实现？

感谢您的回答(请放轻松，第一次发帖)!

Answer 1

onclick 属性未更改。要更改 onclick 使用此

对于女性

document.getElementById("genderButton").setAttribute('onclick','bgChangeFemale()'); 

对于男性-

  document.getElementById("genderButton").setAttribute('onclick','bgChangeMale()');