Button in website wont multiply a value for some reason like the other 2 buttons that should do similar things

Question

I am making a website that has buttons that should multiply vales, but I am having trouble.

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. It wont update the numbers or anything, so I dont know if its a typo or wrong syntax or somthing.

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;
}

  <div class="water" ;><button onclick="changeColor()" ;><img src="Click-Here-PNG-Images.png"></button> </div>
</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="multy()" 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>

This is a good opportunity for you to start familiarizing yourself with [using a debugger](https://stackoverflow.com/q/25385173/328193). When you step through the code in a debugger, which operation first produces an unexpected result? What were the values used in that operation? What was the result? What result was expected? Why? To learn more about this community and how we can help you, please start with the [tour] and read [ask] and its linked resources. — David, Nov 01 '22 at 19:57
@code No need. There are no parts of the script that needs to run at load time — mplungjan, Nov 01 '22 at 20:01
One of your problems is you have variable named the same as a function. Rename multy or function multy — mplungjan, Nov 01 '22 at 20:02
Also use let for all the top vars or add commas between them to reuse the let: `let numy = 0, increment = 1, multy = 2, multym = 2;` — mplungjan, Nov 01 '22 at 20:04

score 0 · Accepted Answer · answered Nov 01 '22 at 20:46

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 class="ih" 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 class="water" ;><button onclick="changeColor()" ;><img src="Click-Here-PNG-Images.png"></button> </div>
</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="multy1()" 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>

score 0 · Answer 2 · answered Nov 01 '22 at 21:08

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 class="ih" 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 class="water" ;><button onclick="changeColor()" ;><img src="Click-Here-PNG-Images.png"></button> </div>
</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="multy()" 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>

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

Button in website wont multiply a value for some reason like the other 2 buttons that should do similar things

2 Answers2