Оператор переключения Javascript внутри функции, которая вызывается при возникновении события onclick - PullRequest
Новая
       21

Оператор переключения Javascript внутри функции, которая вызывается при возникновении события onclick

0 голосов
/ 11 июня 2018

Мой HTML-код такой: 

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

Когда я нажимаю кнопку, я хочу, чтобы вызов myFunction () срабатывал при событии.

Мой JavaScript такой: 

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

Я хочу выводить сообщения в элемент div "message".Когда я запускаю этот код и ввожу код скидки, единственной строкой, которая выводится в сообщение div, является строка по умолчанию:

, введите правильный код скидки.

Кто-нибудь может направить меня в правильном направлении.

Спасибо!

1 Ответ

0 голосов
/ 11 июня 2018

Используйте .value вместо .innerHTML, чтобы получить значение из тега input.

Проверьте ниже: 

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>

Также удалено var discount, которое вы объявили дважды.В этом не было необходимости.

Прочтите это для получения дополнительной информации: https://www.w3schools.com/jsref/prop_text_value.asp

...