Question

我需要帮助。我试图将if条件添加到具有水平滑块的表单。我试图根据滑块的移动方式显示文本。有人可以帮我这个吗？

html代码

<form method="get">
Readability: 0.5<input type="range" name="J" min="0.5" max="14" value={{J}} step="0.1" onChange="readabilityVal();">14  
<input type="submit" value="Update!">
</form>

javascript

<head>   
</script language="Javascript">>

function readabilityVal() 
{ 
  if (read_score >=0.5 and read_score <= 1.5):
                print read_score,"Article for first Grade"
            else if (read_score >1.5 and read_score <=2.5):
                print read_score, "Article suitable for 2nd grade"
            else if (read_score >2.5 and read_score <=3.5):
                print read_score, "Article suitable for 3rd grade"
            else if (read_score >3.5 and read_score <= 4.5):
                print read_score, "Article suitable for 4th grade"
            else if (read_score >4.5 and read_score <= 5.5):
                print read_score, "Article suitable for 5th grade"
            else:
                print "Article suitable for children above 15 years"

  }  
    </script>
</head>

Answer 1

您的JavaScript语法完全错误，您想要的是

HTML

    <form method="get" name="myform">Readability: 0.5
    <input type="range" name="J" min="0.5" max="14" value="" step="0.1" onChange="readabilityVal();" />14
    <input type="submit" value="Update!" />
</form>

的JavaScript

    function readabilityVal() {
    var el = document.forms["myform"]["J"].value;

    if (el >= 0.5 && el <= 1.5) {
        document.write(el + "Article for first Grade");
    } else if (el > 1.5 && el <= 2.5) {
        document.write(el + "Article for first Grade");
    } else if (el > 2.5 && el <= 3.5) {
        document.write(el + "Article for first Grade");
    } else if (el > 3.5 && el <= 4.5) {
        document.write(el + "Article for first Grade")
    } else if (el > 4.5 && el <= 5.5) {
        document.write(el + "Article for first Grade");
    } else {
        document.write("Article for first Grade");
    }

}

<强> Check the Working Fiddle Here

Answer 2

看看这段代码。这是你想要达到的目标吗？我在这个例子中使用了jquery。看看小提琴http://jsfiddle.net/flomath/56yb4gq6/2/。

<form method="get">
    Readability: <div id="readabilityValue"></div><input type="range" name="J" min="0.5" max="14" value={{J}} step="0.1" id="readability"> 
<input type="submit" value="Update!">
</form>



$('#readability').on("change mousemove", function() {
    var read_score = $(this).val();
    if (read_score >= 0.5 && read_score <= 1.5) {
        $("#readabilityValue").html("Article for first Grade");
    } else if (read_score >1.5 && read_score <=2.5) {
        $("#readabilityValue").html("Article suitable for 2nd grade");
    } else if (read_score >2.5 && read_score <=3.5) {
        $("#readabilityValue").html("Article suitable for 3rd grade");
    } else if (read_score >3.5 && read_score <= 4.5) {
        $("#readabilityValue").html("Article suitable for 4th grade");
    } else if (read_score >4.5 && read_score <= 5.5) {
        $("#readabilityValue").html("Article suitable for 5th grade");
    }  else {
        $("#readabilityValue").html("Article suitable for children above 15 years");
    }
});

Answer 3

JavaScript没有print语句，如果需要将某些内容写入控制台，请使用console.log。

如何根据滑块移动显示文本

3 个答案: