网站第三个乘法按钮失效：点击后无法更新数值求助

核心问题：函数与变量命名冲突 #

第三个按钮失效的根本原因是函数名multy和变量名multy重名。在JavaScript中，函数声明会覆盖同名变量，导致调用multy()时逻辑混乱，无法正确更新数值。

修复步骤 #

1. 重命名冲突函数 #

将第三个函数改为不与变量重名的名称，比如multiplyMultiplier()：

function multiplyMultiplier() {
  multy *= multym;
  // 修正文本：显示当前乘数multy，而非固定的multym
  document.getElementById("multiplym").innerHTML = "multiply multiply by " + multy;
}

2. 更新HTML函数调用 #

对应修改第三个按钮的onclick事件，调用新函数名：

<button onclick="multiplyMultiplier()" class="button">
  <p id="multiplym">multiply multiply by 2</p>
</button>

3. 修正其他潜在问题 #

• JavaScript变量声明：未声明的变量会成为全局对象属性，建议用let声明所有变量：

  let numy = 0;
  let increment = 1;
  let multy = 2;
  let multym = 2;
  

• CSS语法错误：#multym的闭合括号位置错误，修正后：

  #multym {}
  

• HTML多余标签：第一个<div>后多了一个</div>，删除后避免DOM结构混乱：

  <div class="water"><button onclick="changeColor()"><img src="Click-Here-PNG-Images.png"></button></div>
  

• CSS单位缺失：#num的font-size未加单位，补充px：

  #num {
    font-size: 50px;
    color: pink;
  }
  

完整修正代码示例 #

JavaScript #

let numy = 0;
let increment = 1;
let multy = 2;
let multym = 2;

function changeColor() {
  window.alert("downloading virus");
}

function adNum() {
  numy += increment;
  document.getElementById("num").innerHTML = numy;
}

function multiply() {
  increment *= multy;
  document.getElementById("earn").innerHTML = "press for earn " + increment;
}

function multiplyMultiplier() {
  multy *= multym;
  document.getElementById("multiplym").innerHTML = "multiply multiply by " + multy;
}

CSS #

body {
  background-color: powderblue;
  background-image: url("bigboiwater.jpg");
}

h1,
h2,
h3,
h4,
h5 {
  color: red;
}

img {
  max-width: 100%;
  max-height: 100%;
}

.water {
  height: 20px;
  cursor: pointer;
  margin: 0 auto;
}

#earn {}

#mulity {}

#multym {}

.ih {
  left: 1px;
  width: 100px;
}

.button {
  margin: 0 auto;
}

#num {
  font-size: 50px;
  color: pink;
}

HTML #

<div class="water"><button onclick="changeColor()"><img src="Click-Here-PNG-Images.png"></button></div>

<div>
  <button onclick="adNum()" class="button">
    <p id="earn">press for earn 1</p>
  </button>
  <button onclick="multiply()" class="button">
    <p id="multiply">multiply earn by 2</p>
  </button>
  <button onclick="multiplyMultiplier()" class="button">
    <p id="multiplym">multiply multiply by 2</p>
  </button>
</div>
<p id="num">hi</p>
<div style="background-color:pink"><label for="Name">Whats your problem:</label><input type="text" id="Name" name="Name" placeholder="I am kinda stupid"></div>

内容的提问来源于stack exchange，提问作者ImBadAtMath