提交时从滑块中选择某个范围后如何提醒?

How to alert once a certain range is selected from slider when submitted?

有一个从 1 到 10 的滑块范围,如果用户输入范围 8 到 10,当他们点击提交按钮时应该有一个关于这些范围的警告框。我试过了,但没有运气。这是我的代码

Javascript

function showValue1(newValue)
{
  document.getElementById("range1").innerHTML=newValue;
}


$('submit1').submit(function () {
    if (newValue > 8 && newValue <10) {
        alert('TEST');
        return false;
    }
});

HTML

<div id="assess">
<div class="container">
<span id="range1">0</span>
<p class="mild">No pain</p>
<input name="pain" id="s1" type="range" min="0" max="10" value="0" step="1" oninput="showValue1(this.value)" />
<p class="extreme"><span class="adjust">Worst possible pain</span></p>
</div>    
<input id="submit1"type="submit" name="submit"value="Submit"></input></p>

这里是html和js的代码:

<html>
<head>
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="js.js"></script>
</head>
<body>
    <div id="assess">
        <div class="container">
            <span id="range1">0</span>
            <p class="mild">No pain</p>
            <input name="pain" id="s1" type="range" min="0" max="10" value="0" step="1" onchange="showValue1(this.value)" />
            <p class="extreme">
                <span class="adjust">Worst possible pain</span>
            </p>
        </div>
        <input id="submit1" type="submit" value="Submit"></input>
    </div>
</body>

我调用了 JavaScript 文件 js.js

$(document).ready(function(){
    $('#submit1').click(function(){
        if($("#s1").val() >= 8 && $("#s1").val() <= 10)
            alert("TEST");
    });
});

function showValue1(newValue)
{
    document.getElementById("range1").innerHTML=newValue;
}

您还没有定义newValue 并且使用了.submit()。您可以使用点击事件 instead.Also 来引用提交按钮,使用 #.

注意:由于您选择的范围,它只会针对“9”发出 true

这是适合我的代码:

$('#submit1').on('click',function () {
var newValue=$('#s1').val();//Extract the value of the slider and then use it for comparison
    if (newValue > 8 && newValue <10) {
        alert('TEST');
        return false;
    }
});