Question

我有下面的滑块：

var rangeValue;
var chanceoflive;
var inputElement = document.querySelector('.range-input');

inputElement.addEventListener('change', function() {
  var rangeValue = parseInt(this.value);
  chanceoflive = chanceoflive || 0;

  chanceoflive = rangeValue > 51 ? 2 : 4;
  }
);

function handleClick(){
    alert(chanceoflive);
}

<main>
    <form oninput="output.value = Math.round(range.valueAsNumber / 1)">
      <h2>
          Choose the Height of Your Building
        </h2>
      <div class="range">
        <input name="range" type="range" min="0" max="100" class="range-input">
        <div class="range-output">
          <output id="output" class="output" name="output" for="range">
            50
          </output>
        </div>
      </div>
    </form>
  </main>

<button type="button" onclick="handleClick()" class="submit">Submit</button>

如果滑块低于51，它将发出警告4.如果滑块不低于51，它将发出警报2.但是，如果滑块为50，则警告未定义或{{1} }或NaN。为什么要这样做，我该如何解决？

Answer 1

问题是，在更改chanceoflive之前，您的.range-input变量未初始化。

至少你可以写var chanceoflive = 4;来对应.range-input的初始值

var rangeValue;
var chanceoflive = 4;
var inputElement = document.querySelector('.range-input');

inputElement.addEventListener('change', function() {
  var rangeValue = parseInt(this.value);
  chanceoflive = chanceoflive || 0;

  chanceoflive = rangeValue > 51 ? 2 : 4;
  }
);

function handleClick(){
    alert(chanceoflive);
}

<main>
    <form oninput="output.value = Math.round(range.valueAsNumber / 1)">
      <h2>
          Choose the Height of Your Building
        </h2>
      <div class="range">
        <input name="range" type="range" min="0" max="100" class="range-input">
        <div class="range-output">
          <output id="output" class="output" name="output" for="range">
            50
          </output>
        </div>
      </div>
    </form>
  </main>

<button type="button" onclick="handleClick()" class="submit">Submit</button>

Answer 2

将change计算结果放在一个单独的函数click中，然后在var rangeValue; var chanceoflive; var inputElement = document.querySelector('.range-input'); var buttonElement = document.querySelector('.submit'); inputElement.addEventListener('change', getChanceOfLive); buttonElement.addEventListener('click', getChanceOfLive); function getChanceOfLive(){ var rangeValue = parseInt(this.value); chanceoflive = chanceoflive || 0; chanceoflive = rangeValue > 51 ? 2 : 4; alert(chanceoflive); }和按钮var rangeValue; var chanceoflive; var inputElement = document.querySelector('.range-input'); var buttonElement = document.querySelector('.submit'); inputElement.addEventListener('change', getChanceOfLive); buttonElement.addEventListener('click', getChanceOfLive); function getChanceOfLive(){ var rangeValue = parseInt(this.value); chanceoflive = chanceoflive || 0; chanceoflive = rangeValue > 51 ? 2 : 4; alert(chanceoflive); }上调用它：

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

希望这有帮助。

＆＃13;

var rangeValue;
var chanceoflive;
var inputElement  = document.querySelector('.range-input');
var buttonElement = document.querySelector('.submit');

inputElement.addEventListener('change', getChanceOfLive);
buttonElement.addEventListener('click', function(){
   getChanceOfLive();
  
  alert(chanceoflive);
},false);

function getChanceOfLive(){
  var rangeValue = parseInt(this.value);
  chanceoflive = chanceoflive || 0;
  chanceoflive = rangeValue > 51 ? 2 : 4;
}

＆＃13;

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

＆＃13;

如果您只想提交使用提醒：

＆＃13;

Cannot find module 'phoenix_js'

＆＃13;

1.0.0-beta.22-1

＆＃13;

Answer 3

现在你去了它

只需要初始化机会

<main>
    <form oninput="output.value = Math.round(range.valueAsNumber / 1)">
      <h2>
          Choose the Height of Your Building
        </h2>
      <div class="range">
        <input name="range" type="range" min="0" max="100" class="range-input">
        <div class="range-output">
          <output id="output" class="output" name="output" for="range">
            50
          </output>
        </div>
      </div>
    </form>
  </main>

<button type="button" onclick="handleClick()" class="submit">Submit</button>

<script src="//cdn.tinymce.com/4/tinymce.min.js"></script>
<script>
    tinymce.init({
     selector:'textarea',
     plugins: [
     "advlist autolink lists link image charmap print preview anchor",
     "searchreplace visualblocks code fullscreen",
     "insertdatetime media table contextmenu paste"
   ],

   file_browser_callback: function(field_name, url, type, win) {
     // file upload callback
   }
});

滑块未定义/ NaN错误

3 个答案: