CODEWITHSUNDEEP
javascripthtml
frustratedFrankenstein
frustratedFrankenstein

Reputation: 25

Why do I get the same result regardless of which button I click?

I'm trying to make a basic program that takes the values of two HTML input fields, and multiplies or divides them depending upon which button was clicked. At the moment, I'm just trying to alert the value of either the multiply or divide button via document.getElementById().

However, at present it believes I have clicked the Multiply button, even if I click Divide.

Here is the HTML:

<form>
    <input type="text" placeholder="enter a number" id="numOne"/>
    <input type="text" placeholder="enter a number" id="numTwo"/>
    <br>
    <button id="M" onclick="calc()" value="Multiply">Multiply</button>   
    <button id="D" onclick="calc()" value="Divide">Divide</button>
</form>

and the JavaScript:

function calc() {
    if (document.getElementById('M').value === 'Multiply') {
        alert('You clicked multiply');
    } else if (document.getElementById('D').value === 'Divide') {
        alert('You clicked divide');
    }
}

I've tried to figure it out myself and look it up, and have found nothing.

Upvotes: 2

Views: 84

Answers (4)

user8190318
user8190318

Reputation:

This is working for first button because your both buttons have same function and first if statement check if M id has multiply and it does so it returns true and message multiply was clicked try using same class name to check value and then it will work. Or do it like this: 

function calc(thisValue) {
  if (thisValue === 'Multiply') {
      alert('You clicked multiply');
  } else if (thisValue === 'Divide') {
      alert('You clicked divide');
  }
}
<form>
<input type="text" placeholder="enter a number" id="numOne"/>
<input type="text" placeholder="enter a number" id="numTwo"/>
    <br>
<button onclick="calc(this.value)" value="Multiply">Multiply</button>   
<button onclick="calc(this.value)" value="Divide">Divide</button>
</form>

Upvotes: 0

spanky
spanky

Reputation: 2870

You were checking a condition that would never change. The ID M will always have the value Multiply and D will always have Divide.

You were probably thinking of looking dynamically at the ID of the button clicked. You can do this by passing the event object, and using event.currentTarget to get a reference to that element, then act based on the ID you find.

function calc(event) {
  // Stop the form from submitting
  event.preventDefault();
  
  // Find which button was clicked.
  const btn = event.currentTarget;
  
  // Use the ID of btn to decide what to do
  switch (btn.id) {
  case "M":
    alert('You clicked multiply');
    break;
  case "D":
    alert('You clicked divide');
    break;
  }
}
<form>
  <input type="text" placeholder="enter a number" id="numOne" />
  <input type="text" placeholder="enter a number" id="numTwo" />
  <br>
  <button id="M" onclick="calc(event)" value="Multiply">Multiply</button>
  <button id="D" onclick="calc(event)" value="Divide">Divide</button>
</form>

Upvotes: 0

adeneo
adeneo

Reputation: 318232

You can add a different function for each button

document.getElementById('M').addEventListener('click', function(e) {
  e.preventDefault();
  
  var val1 = document.getElementById('numOne').value;
  var val2 = document.getElementById('numTwo').value;
  var answ = document.getElementById('answer');
  
  answ.value = val1 * val2;
});

document.getElementById('D').addEventListener('click', function(e) {
  e.preventDefault();
  
  var val1 = document.getElementById('numOne').value;
  var val2 = document.getElementById('numTwo').value;
  var answ = document.getElementById('answer');
  
  answ.value = val1 / val2;
});
<form>
  <input placeholder="enter a number" id="numOne" />
  <input placeholder="enter a number" id="numTwo" />
  <br>
  <button id="M">Multiply</button>
  <button id="D">Divide</button>
  <br><br>
  <input id="answer" />
</form>

Upvotes: 4

Kita
Kita

Reputation: 1558

The first if check (if (document.getElementById('M').value === 'Multiply') {) will always evaluate to true because the value of that button will always be "Multiply". You can either pass in an onclick parameter to calc() that tells the method what to do, or define separate methods for multiplying and dividing and call the respective ones onclick.

Upvotes: 1

Related Questions