Button in website wont multiply a value for some reason like the other 2 buttons that should do simi-CodePudding

I was making my first website ever.

The first button adds one to the number at the bottom, the second button multiplies the amount that's added by 2, and the third one should multiply the multiplier, but for some reason it doesn't work. If someone could point out the error in my code that would be great! also I am sorry for the Very unprofessional website, I just wanted to make it me.

let numy = 0
increment = 1
multy = 2
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 multy() {
  multy *= multym
  document.getElementById("multiplym").innerHTML = "multiply asmdfmasdfams by "   multym;
}

body {
  background-color: powderblue;
}

body {
  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: 50;
  color: pink;
}

<title>you should drink water</title>
<link rel="icon" href="troll.png" />
<div  style="cursor:progress" ;>
  <h1 style="cursor:wait;">Water!</h1>
  <h2 style="cursor:crosshair" ;>Water!</h2>
  <h3 style="cursor:alias" ;>Water</h3>
  <h4 style="cursor:not-allowed" ;>Water</h4>
  <h5 style="cursor:zoom-in" ;>Water</h5>
  <img src="troll.png">
  <div  ;><button onclick="changeColor()" ;><img src="Click-Here-PNG-Images.png"></button> </div>
</div>

<div>
  <button onclick="adNum()" >
      <p id="earn">press for earn 1</p>
    </button>
  <button onclick="multiply()" >
      <p id="multiply">multiply earn by 2</p>
    </button>
  <button onclick="multy()" >
      <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>

CodePudding user response：

you make multy a global variable. change the name of your function to multy1

let numy = 0
increment = 1
multy = 2
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 multy1() {
console.log("hello")
  
  document.getElementById("multiplym").innerHTML = "multiply asmdfmasdfams by "   multym;
}

body {
  background-color: powderblue;
}

body {
  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: 50;
  color: pink;
}

<title>you should drink water</title>
<link rel="icon" href="troll.png" />
<div  style="cursor:progress" ;>
  <h1 style="cursor:wait;">Water!</h1>
  <h2 style="cursor:crosshair" ;>Water!</h2>
  <h3 style="cursor:alias" ;>Water</h3>
  <h4 style="cursor:not-allowed" ;>Water</h4>
  <h5 style="cursor:zoom-in" ;>Water</h5>
  <img src="troll.png">
  <div  ;><button onclick="changeColor()" ;><img src="Click-Here-PNG-Images.png"></button> </div>
</div>

<div>
  <button onclick="adNum()" >
      <p id="earn">press for earn 1</p>
    </button>
  <button onclick="multiply()" >
      <p id="multiply">multiply earn by 2</p>
    </button>
  <button onclick="multy1()" >
      <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>

CodePudding user response：

You have a function and a variable - both called multy. The issues should be resolved if you rename either of them. Below, the variable has been renamed to multiplier.

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

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

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

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

function multy() {
  multiplier *= multym;
  document.getElementById("multiply").innerHTML = "multiply earn by "   multiplier;
  document.getElementById("multiplym").innerHTML = "multiply asmdfmasdfams by "   multym;
}

body {
  background-color: powderblue;
}

body {
  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: 50;
  color: pink;
}

<title>you should drink water</title>
<link rel="icon" href="troll.png" />
<div  style="cursor:progress" ;>
  <h1 style="cursor:wait;">Water!</h1>
  <h2 style="cursor:crosshair" ;>Water!</h2>
  <h3 style="cursor:alias" ;>Water</h3>
  <h4 style="cursor:not-allowed" ;>Water</h4>
  <h5 style="cursor:zoom-in" ;>Water</h5>
  <img src="troll.png">
  <div  ;><button onclick="changeColor()" ;><img src="Click-Here-PNG-Images.png"></button> </div>
</div>

<div>
  <button onclick="adNum()" >
      <p id="earn">press for earn 1</p>
    </button>
  <button onclick="multiply()" >
      <p id="multiply">multiply earn by 2</p>
    </button>
  <button onclick="multy()" >
      <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>

(I also added one more line within the function so that the change is reflected in the middle button text.)