CODEWITHSUNDEEP
javascriptonclickswitch-statement
Mark
Mark

Reputation: 187

Javascript switch statement within a function that is called when the onclick event fires

My HTML is this:

 <h3>Please enter your discount code</h3>
    <input type="text" name="discountCode" id="discountCode">
    <div id="message"></div>
    <button id="myButton"  onclick="myFunction()">Click Me</button>

When I click the button, I want the call to myFunction() fire on the event.

My JavaScript is this:

 function myFunction(){
    var discount;
    var discount = document.getElementById("discountCode").innerHTML;
    switch(discount){
        case "SAVE10":
        document.getElementById("message").innerHTML = "you are saving 10% on this order.";
        break;

        case "SAVE15":
        document.getElementById("message").innerHTML = "you are saving 15% on this order.";
        break;

        default:
        document.getElementById("message").innerHTML = "please enter a valid discount code.";
        break;
    }
}

I want to output the messages to the div element of "message". When I run this code and enter a discount code, the only line that outputs to the message div is the default line:

please enter a valid discount code.

Can anyone steer me in the right direction.

Thanks!

Upvotes: 1

Views: 1311

Answers (1)

Vikasdeep Singh
Vikasdeep Singh

Reputation: 21766

Use .value instead of .innerHTML to get value from input tag.

Check below:

function myFunction() {
  var discount = document.getElementById("discountCode").value;
  switch (discount) {
    case "SAVE10":
      document.getElementById("message").innerHTML = "you are saving 10% on this order.";
      break;

    case "SAVE15":
      document.getElementById("message").innerHTML = "you are saving 15% on this order.";
      break;

    default:
      document.getElementById("message").innerHTML = "please enter a valid discount code.";
      break;
  }
}
<h3>Please enter your discount code</h3>
<input type="text" name="discountCode" id="discountCode">
<div id="message"></div>
<button id="myButton" onclick="myFunction()">Click Me</button>

Also removed var discount you declared twice. That was not required.

Read this for more information : https://www.w3schools.com/jsref/prop_text_value.asp

Upvotes: 2

Related Questions