Alerting Неправильное значение Slider Выход

У меня есть ползунок, который предупреждает выход на нажатие кнопки, но он всегда предупреждает 2, когда он должен предупредить: 1, 2, 3 или 4. Вот мой код:Alerting Неправильное значение Slider Выход

var chanceoflive3; 
 
var inputElement = document.querySelector('.range-input'); 
 
    var submitElement = document.querySelector('.submit'); 
 

 
    submitElement.addEventListener('click', function() { 
 
    document.getElementById('paragraph').innerHTML = (chanceoflive3||0); 
 
    localStorage.setItem("chanceoflive3", chanceoflive3); 
 
    }); 
 

 
    inputElement.addEventListener('change', function() { 
 
    var rangeValue = parseInt(this.value); 
 
    chanceoflive3 = (chanceoflive3 || 0); 
 

 
    if (rangeValue == 1) { 
 
     chanceoflive3 = 1; 
 
    } 
 

 
    else if (rangeValue > 1 && rangeValue < 51) { 
 
     chanceoflive3 = 2; 
 
    } 
 

 
    else if (rangeValue > 50 && rangeValue < 100) { 
 
     chanceoflive3 = 3; 
 
    } 
 

 
    else if (rangeValue == 100) { 
 
     chanceoflive3 = 4; 
 
    } 
 
    } 
 
); 
 

 
    function handleClick(){ 
 
    alert(chanceoflive3); 
 
    }

<main> 
 
    <form oninput="output.value = Math.round(range.valueAsNumber/1)"> 
 
     <h2> 
 
      Choose the Length of Your House 
 
     </h2> 
 
     <div class="range"> 
 
     <input name="range" type="range" min="1" max="100" class="range-input"> 
 
     <div class="range-output"> 
 
      <output id="output" class="output" name="output" for="range"> 
 
      50 
 
      </output> 
 
     </div> 
 
     </div> 
 
    </form> 
 
    </main> 
 

 
    <div class="wrapper"> 
 
    <button align=center onclick="handleClick()"> 
 
     <canvas width="200" height="50" id="canvas" align=center></canvas> 
 
     <hover></hover> 
 
     <span id="submit">SUBMIT</span> 
 
    </button> 
 
    </div>

он должен предупредить 1, если ползун установлен в 1, тревога 2 если ползунок находится в пределах от 2 до 50, оповещения 3, если ползунок находится в пределах от 51 до 99, и 4, если он установлен на 100. Хотя, он предупреждает 2, несмотря ни на что. Почему, и как я могу это исправить?

источник

2017-01-10 Nathan Chan

Вы не в состоянии заранее установить 'chanceoflive3', или же вы просто решили не включать его в этом фрагменте? Это не сработает, если вы не установили его первым, благодаря определению области обзора. –

Другое примечание: ваша кнопка отправки имеет * id * отправки, и все же вы выбираете '.submit' (селектор классов) вместо' # submit'. –

Попробуйте это:

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title></title> 
</head> 
<body> 
    <main> 
     <form oninput="output.value = Math.round(range.valueAsNumber/1)"> 
      <h2> 
       Choose the Length of Your House 
      </h2> 
      <div class="range"> 
       <input name="range" type="range" min="1" max="100" class="range-input"> 
       <div class="range-output"> 
        <output id="output" class="output" name="output" for="range"> 
         50 
        </output> 
       </div> 
      </div> 
     </form> 
    </main> 

    <div class="wrapper"> 
     <button align=center onclick="handleClick()"> 
      <canvas width="200" height="50" id="canvas" align=center></canvas> 
      <hover></hover> 
      <span id="submit">SUBMIT</span> 
     </button> 
    </div> 
    <script type="text/javascript"> 
     var inputElement = document.querySelector('.range-input'); 
     var submitElement = document.querySelector('#submit'); 
     var chanceoflive3 = chanceoflive3 || 0; 

     submitElement.addEventListener('click', function() { 
      document.getElementById('paragraph').innerHTML = (chanceoflive3 || 0); 
      localStorage.setItem("chanceoflive3", chanceoflive3); 
     }); 

     inputElement.addEventListener('change', function() { 
      var rangeValue = parseInt(this.value); 

      if (rangeValue == 1) { 
       chanceoflive3 = 1; 
      } 

      else if (rangeValue > 1 && rangeValue < 51) { 
       chanceoflive3 = 2; 
      } 

      else if (rangeValue > 50 && rangeValue < 100) { 
       chanceoflive3 = 3; 
      } 

      else if (rangeValue == 100) { 
       chanceoflive3 = 4; 
      } 
     }); 

    function handleClick() { 
     alert(chanceoflive3); 
    } 
    </script> 
</body> 
</html>

источник

2017-01-10 04:40:44

Большое вам спасибо! Я бы никогда этого не понял! Я отмечу это как мой ответ! –

'var chanceoflive3 = chanceoflive3 || 0; '... действительно? это просто «var chanceoflive3 = 0;» ... также, несколько слов, объясняющих разницу, помогли бы другим, возможно ... ваш код на 99,9% идентичен вопросу, поэтому его не должно быть слишком сложно объяснить. –

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

Alerting Неправильное значение Slider Выход

ответ

Смежные вопросы