проблема JavaScript с несколькими нажатиями кнопок - PullRequest
Новая
       6

проблема JavaScript с несколькими нажатиями кнопок

0 голосов
/ 24 октября 2018

Я новичок в javascript и просто хочу создать простую веб-страницу, где пользователь вводит число (id = "number") и затем нажимает одну из нескольких кнопок (btn6 или btn7 и т. Д.), Которые затем умножают введенное число наномер на кнопке.Приведенный ниже код работает, но не при нажатии кнопки более одного раза.Почему это и как я могу изменить это?

<html>

<head>
  <title>L100 variables</title>
</head>

<body>
  <p>Please enter a number </p>
  <input type="text" id="number">

  <button id="btn2"> x2</button>
  <button id="btn6"> x6</button>
  <button id="btn7"> x7</button>
  <button id="btn78"> x78</button>
  <button id="btn90"> x90</button>


  <p id="output"> </p>

  <script>
    document.getElementById("btn2").onclick = function() {

      var input = document.getElementById("number").value;
      var output = input * 2;
      document.getElementById("output").innerHTML = output;
    }
  </script>

</body>

</html>

Ответы [ 2 ]

0 голосов
/ 24 октября 2018

Это работает, просто не так, как вы себе это представляете.В настоящее время вы умножаете вход на 2, и выход будет входом * 2. Если вы продолжаете нажимать кнопку умножения на 2, вход остается неизменным, поэтому ваш вывод остается прежним.Если вы хотите, чтобы ваше поведение умножалось на 2 снова и снова, вам необходимо настроить вход так, чтобы оно также умножалось на 2.

Что-то вроде: 

    document.getElementById("number").value = output;
0 голосов
/ 24 октября 2018

Вы устанавливаете значение выхода на input * 2.Повторное нажатие кнопки работает просто отлично: оно умножает значение ввода на два и отправляет его на выход.Если входное значение не изменилось за это время, выходное значение будет таким же, и оно будет выглядеть как нажатие кнопки снова ничего не сделало.

Как это исправить, зависит от того, чтоТочное поведение, которое вы хотите.Если вы хотите умножить ввод несколько раз подряд и каждый раз увеличивать его, все, что вам нужно сделать, это установить значение элемента ввода вместо значения элемента вывода, например: 

<html>

<head>
  <title>L100 variables</title>
</head>

<body>
  <p>Please enter a number </p>
  <input type="text" id="number">

  <button id="btn2"> x2</button>
  <button id="btn6"> x6</button>
  <button id="btn7"> x7</button>
  <button id="btn78"> x78</button>
  <button id="btn90"> x90</button>

  <p id="output"> </p>

  <script>
    document.getElementById("btn2").onclick = function() {

      var inputElement = document.getElementById("number");
      var input = inputElement.value;
      var output = input * 2;
      inputElement.value = output;

      // optional:
      document.getElementById("output").innerHTML = output;
    }
  </script>

</body>

</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...