多次更改 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()";
}

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

感谢您的回答（请放轻松，第一次发帖）！

Answer 1

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

女性

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

男性-

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

多次更改 onclick() 函数（背景图像更改）

Change onclick() function multiple times (background image change)

html

javascript

css

function

onclick