Использование значения, вводимого в программный ползунок диапазона - PullRequest
Новая
       8

Использование значения, вводимого в программный ползунок диапазона

0 голосов
/ 26 августа 2018

Я сделал эти два программных ползунка диапазона, где пользователь может выбрать значение, сдвинув полосу или введя число в поле.(Я уверен, что есть более эффективный метод, но я только учусь)

Однако, когда я пытаюсь использовать значение в поле для добавления, он возвращает NAN.Я думал, что это просто потому, что он использовал строковое значение, но даже с функцией parseFloat он отображается некорректно.

Как я должен ссылаться на эти переменные вне «функции (толщинаA / B)» вЧтобы использовать их в математических операциях?

Спасибо. 

<html>
  <body>
        <h3> Thickness A</h3>
          <p> Please select value using the slider bar or type in the text box.</p>
          <input type="range" id="thicknessARange" value="0" min="0" max="100" step="0.1"
              oninput="thicknessA(this.value)"
              onchange="thicknessA(this.value)">
          </input>
          <br>
          <p> Thickness A is:
          <input type="number" id="thicknessANumber" value="0" min="0" max="100" step="0.1"
              oninput="thicknessA(this.value)"
              onchange="thicknessA(this.value)">
         </input>
              <span>mm</span></p>

        <h3> Thickness B</h3>
          <p> Please select value using the slider bar or type in the text box.</p>
          <input type="range" id="thicknessBRange" value="0" min="0" max="100" step="0.1"
            oninput="thicknessB(this.value)"
            onchange="thicknessB(this.value)">
          <br>
          <p>Thickness B is:
          <input type="number" id="thicknessBNumber" value="0" min="0" max="100" step="0.1"
          oninput="thicknessB(this.value)"
          onchange="thicknessB(this.value)"> </input>
          <span>mm</span></p>

          <h4>Your total is: <span id="total"></span>

        <script>
        var uno;
        var dos;
        var addition;

        function thicknessA(newthicknessA)
            {
            document.getElementById('thicknessARange').value = newthicknessA;
            document.getElementById('thicknessANumber').value = newthicknessA;
            uno = document.getElementById('thicknessANumber').value;
            }
        function thicknessB(newthicknessB)
            {
            document.getElementById('thicknessBRange').value = newthicknessB;
            document.getElementById('thicknessBNumber').value = newthicknessB;
            dos = document.getElementById('thicknessBNumber').value;
            }

         addition = parseFloat(uno) + parseFloat(dos) ;
         document.getElementById("total").innerHTML= addition;

         </script></body></html>

1 Ответ

0 голосов
/ 26 августа 2018

У меня есть несколько комментариев, которые, надеюсь, помогут вам здесь.Причина, по которой вы получаете NaN, двоякая.

  1. У вас нет начального значения uno / dos, поэтому они оба не определены для начала.

В Javascript:

parseFloat(undefined) = NaN (не число)

Вы никогда не сбрасываете значение сложения после каждого изменения значения, поэтому addition остается NaN все время.

Вы можете попробовать что-то подобное, чтобы проиллюстрировать следующие моменты:

`` `

<h3> Thickness A</h3>
<p> Please select value using the slider bar or type in the text box.</p>
<input type="range" id="thicknessARange" value="0" min="0" max="100" step="0.1" oninput="thicknessA(this.value)" onchange="thicknessA(this.value)"></input>
<br>
<p> Thickness A is:
  <input type="number" id="thicknessANumber" value="0" min="0" max="100" step="0.1" oninput="thicknessA(this.value)" onchange="thicknessA(this.value)">
  <span>mm</span></p>

<h3> Thickness B</h3>
<p> Please select value using the slider bar or type in the text box.</p>
<input type="range" id="thicknessBRange" value="0" min="0" max="100" step="0.1" oninput="thicknessB(this.value)" onchange="thicknessB(this.value)" />
<br>
<p>Thickness B is:
  <input type="number" id="thicknessBNumber" value="0" min="0" max="100" step="0.1" oninput="thicknessB(this.value)" onchange="thicknessB(this.value)" />
  <span>mm</span></p>

<h4>Your total is: <span id="total"></span></h4>

<script>
var uno = 0;
var dos = 0;
var addition;

function thicknessA(newthicknessA) {
  document.getElementById('thicknessARange').value = newthicknessA;
  document.getElementById('thicknessANumber').value = newthicknessA;
  uno = document.getElementById('thicknessANumber').value;
  calculateTotal();
}

function thicknessB(newthicknessB) {
  document.getElementById('thicknessBRange').value = newthicknessB;
  document.getElementById('thicknessBNumber').value = newthicknessB;
  dos = document.getElementById('thicknessBNumber').value;
  calculateTotal();
}

function calculateTotal() {
  addition = (parseFloat(uno) + parseFloat(dos));
  document.getElementById("total").innerHTML = addition;
}

calculateTotal();
</script>

` ``

Для вашего html, некоторые стили:

  1. Вы можете использовать самозакрывающиеся теги для вводатеги.
  2. У вас есть плавающий тег, который должен быть закрыт ()

Re: onchange / oninput Поддержка браузера:

  1. Похоже, IE можетесть некоторые проблемы с onInput: https://caniuse.com/#search=range
  2. Возможно, вы захотите проверить другие потоки, в которых люди конкретно говорят об обработчиках (например: Событие onchange для типа ввода = диапазон не запускается в Firefoxпри перетаскивании ), но обязательно проверяйте даты в ответах на случай, если информация устарела.
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...