текстовое поле не читает значения нажатием кнопки, но пока я физически не добавлю значение в текстовое поле - PullRequest
Новая
       10

текстовое поле не читает значения нажатием кнопки, но пока я физически не добавлю значение в текстовое поле

0 голосов
/ 20 ноября 2018

У меня есть три текстовых поля, в каждом поле есть кнопка для увеличения или уменьшения значения и конечное текстовое поле, в котором будет показано вычисление каждого из значений поля.

Все работают хорошо, но проблема в том.Всякий раз, когда я физически добавляю значение в эти три поля ввода, оно получает значение и отображает его.first pro -> но всякий раз, когда я пытаюсь добавить значение, нажав кнопку, она не отображает значения.

second pro-> по умолчанию im, добавляя значения в каждое текстовое поле, они должны отображать окончательные вычисленные значения вмое четвертое текстовое поле, которое находится справа вверху, но пока я не коснусь какого-либо текстового поля, оно не отображает рассчитанные значения для одного и того же.

Пожалуйста, помогите мне, оно действительно необходимо.Вот мой исходный код. 

window.sum = () => document.getElementById('get_my_value').value =Array.from(document.querySelectorAll('#txt1,#txt2,#txt3')).map(e => parseInt(e.value) || 0).reduce((a, b) => a + b, 0)

function increaseValueFirst() {
  // body... 
  var value = parseInt(document.getElementById('txt1').value, 10);
  value = isNaN(value) ? 0 : value;
  value++;
  document.getElementById('txt1').value = value;
}

function decreaseValueFirst() {
  // body... 
  var value = parseInt(document.getElementById('txt1').value, 10);
  value = isNaN(value) ? 0 : value;
  value < 1 ? value = 1 : '';
  value--;
  document.getElementById('txt1').value = value;
}

function increaseValueSec() {
  // body... 
  var value = parseInt(document.getElementById('txt2').value, 10);
  value = isNaN(value) ? 0 : value;
  value++;
  document.getElementById('txt2').value = value;

}

function decreaseValueSec() {
  // body... 
  var value = parseInt(document.getElementById('txt2').value, 10);
  value = isNaN(value) ? 0 : value;
  value < 1 ? value = 1 : '';
  value--;
  document.getElementById('txt2').value = value;
}

function increaseValueThird() {
  // body... 
  var value = parseInt(document.getElementById('txt3').value, 10);
  value = isNaN(value) ? 0 : value;
  value++;
  document.getElementById('txt3').value = value;

}

function decreaseValueThird() {
  // body... 
  var value = parseInt(document.getElementById('txt3').value, 10);
  value = isNaN(value) ? 0 : value;
  value < 1 ? value = 1 : '';
  value--;
  document.getElementById('txt3').value = value;
}
<?php 
   $firstvalue = 1;
   $secondvalue = 1;
    ?>
<!DOCTYPE html>
<html>

<head>
  <title></title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>

<body>
  <div class="row">
    <div class="form-group">
      <div class="col-sm-1">
        <label>Night</label>
        <input type="text" name="quant[2]" class="form-control input-number" value="0" min="0" max="100" id="get_my_value" onchange="dateRangeSelector()" readonly>
      </div>
    </div>
  </div>
  <input type="button" value="-" id="subsfirst" class="subsfirst" onclick="decreaseValueFirst()">
  <input type="text" id="txt1" onkeyup="sum()" />
  <input type="button" value="+" id="addfirst" class="addfirst" onclick="increaseValueFirst()">
  <input type="button" value="-" id="subssec" class="subssec" onclick="decreaseValueSec()">
  <input type="text" id="txt2" onkeyup="sum()" style="margin-right:10px;" />
  <input type="button" value="+" id="addsec" class="addsec" onclick="increaseValueSec()">
  <input type="button" value="-" id="substhird" class="substhird" onclick="decreaseValueThird()">
  <input type="text" id="txt3" onkeyup="sum()" />
  <input type="button" value="+" id="addthird" class="addthird" onclick="increaseValueThird()">
  </div>
  </div>
  </div>
</body>

</html>

Теперь вы можете видеть, что нажата кнопка не работает, а работает, пока вы не добавите значения физически.

Второй справа вверху естьВ окончательном вычисляемом текстовом поле, в котором отображаются итоговые значения, значения по умолчанию также не отображаются, пока вы не добавите или не нажмете какое-либо из каждого текстового поля.

заранее спасибо.

Ответы [ 2 ]

0 голосов
/ 20 ноября 2018

Кнопки не работают, так как они не вызывают метод onkeyup, который используется для вычисления sum и отображения суммы с помощью метода sum().Таким образом, вместо этого вы можете вызывать как функции увеличения / уменьшения, так и метод sum(), когда нажимаете кнопку (таким образом, добавляя / вычитая и пересчитывая и отображая сумму):

onclick="decreaseValueFirst(); sum();"

Вы можете применить это к каждой из ваших кнопок, чтобы получить следующий рабочий результат: 

window.sum = () =>
  document.getElementById('get_my_value').value =
  Array.from(
    document.querySelectorAll('#txt1,#txt2,#txt3')
  ).map(e => parseInt(e.value) || 0)
  .reduce((a, b) => a + b, 0)

function increaseValueFirst() {
  // body... 
  var value = parseInt(document.getElementById('txt1').value, 10);
  value = isNaN(value) ? 0 : value;
  value++;
  document.getElementById('txt1').value = value;

}

function decreaseValueFirst() {
  // body... 
  var value = parseInt(document.getElementById('txt1').value, 10);
  value = isNaN(value) ? 0 : value;
  value < 1 ? value = 1 : '';
  value--;
  document.getElementById('txt1').value = value;
}

function increaseValueSec() {
  // body... 
  var value = parseInt(document.getElementById('txt2').value, 10);
  value = isNaN(value) ? 0 : value;
  value++;
  document.getElementById('txt2').value = value;

}

function decreaseValueSec() {
  // body... 
  var value = parseInt(document.getElementById('txt2').value, 10);
  value = isNaN(value) ? 0 : value;
  value < 1 ? value = 1 : '';
  value--;
  document.getElementById('txt2').value = value;
}

function increaseValueThird() {
  // body... 
  var value = parseInt(document.getElementById('txt3').value, 10);
  value = isNaN(value) ? 0 : value;
  value++;
  document.getElementById('txt3').value = value;

}

function decreaseValueThird() {
  // body... 
  var value = parseInt(document.getElementById('txt3').value, 10);
  value = isNaN(value) ? 0 : value;
  value < 1 ? value = 1 : '';
  value--;
  document.getElementById('txt3').value = value;
}
<?php 
   $firstvalue = 1;
   $secondvalue = 1;
    ?>
<!DOCTYPE html>
<html>

<head>
  <title></title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>

<body>
  <div class="row">
    <div class="form-group">
      <div class="col-sm-1">
        <label>Night</label>
        <input type="text" name="quant[2]" class="form-control input-number" value="0" min="0" max="100" id="get_my_value" onchange="dateRangeSelector()" readonly>
      </div>
    </div>
  </div>
  <input type="button" value="-" id="subsfirst" class="subsfirst" onclick="decreaseValueFirst(); sum();">
  <input type="text" id="txt1" onkeyup="sum()" />
  <input type="button" value="+" id="addfirst" class="addfirst" onclick="increaseValueFirst(); sum();">
  <input type="button" value="-" id="subssec" class="subssec" onclick="decreaseValueSec(); sum();">
  <input type="text" id="txt2" onkeyup="sum()" style="margin-right:10px;" />
  <input type="button" value="+" id="addsec" class="addsec" onclick="increaseValueSec(); sum();">
  <input type="button" value="-" id="substhird" class="substhird" onclick="decreaseValueThird(); sum();">
  <input type="text" id="txt3" onkeyup="sum()" />
  <input type="button" value="+" id="addthird" class="addthird" onclick="increaseValueThird(); sum();">
  </div>
  </div>
  </div>
</body>

</html>
0 голосов
/ 20 ноября 2018

Вы вызываете функцию sum() для события keyup в текстовых полях. При изменении значения в текстовом поле с помощью кнопок +/- событие keyup не срабатывает. Вызовите функцию sum() после изменения значения.

Пример кода: 

function decreaseValueFirst() {
  // body... 
  var value = parseInt(document.getElementById('txt1').value, 10);
  value = isNaN(value) ? 0 : value;
  value < 1 ? value = 1 : '';
  value--;
  document.getElementById('txt1').value = value;
  sum();  // <-- New line added
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...