根据两个整数之间的值返回一个字符串

Question

对你们来说是相当简单的一个，但任何人都可以告诉我我哪里出错了？我只需要根据输入到文本框中的整数返回“Easy”，“Moderate”或“Hard”。

HTML

<form id="form1" name="form1" method="post" action=""> 
<table> 
    <tr> 
     <td>Score:</td> 
     <td><input type="text" name="enter" id="enter" size="1"/></td> 
     <td><input type="text" name="result" id="result" disabled /></td> 
    </tr> 
</table> 
</form> 

JS

function update() { 
    var v = document.getElementsById('enter')[0].value; 
    var output = v; 
    if ((v > 1) && (v <= 10)) = "Easy"; 
    else if ((v > 11) && (v <= 20)) = "Moderate"; 
    else ((v > 21) && (v <= 30)) = "Hard"; 
    document.getElementById('result').innerHTML = output; 
} 

Answer 1

<form id="form1" name="form1" method="post" action=""> 
    <table> 
     <tr> 
      <td>Score:</td> 
      <td><input type="text" name="enter" id="enter" size="1" onchange="update();"/></td> 
      <td><input type="text" name="result" id="result" disabled /></td> 
     </tr> 
    </table> 
</form> 

<script type="text/javascript"> 
    'use strict'; 

    function update() { 
     var v = document.form1.enter.value; 
     var output = ''; 
     if (v > 1 && v <= 10) { 
      output = "Easy"; 
     } else if (v > 10 && v <= 20) { 
      output = "Moderate"; 
     } else if (v > 20 && v <= 30) { 
      output= "Hard"; 
     } 
     document.getElementById('result').value = output; 
    } 
</script> 

Answer 2

function update() { 
    var v = document.getElementById('enter').value; 
    var output; 

    if ((v > 1) && (v <= 10)) output = "Easy"; 
    else if ((v > 11) && (v <= 20)) output = "Moderate"; 
    else if ((v > 21) && (v <= 30)) output = "Hard"; 

    document.getElementById('result').value = output; 
} 

哪里你认为你正在分配这个文本字符串值？你不能用一个else语句来表达条件。

Answer 3

这可以做更多的可读性！

如果v是>30，你会怎么做？那么1或11或21？我用"Impossible!"作为占位符为你在这个例子：

function update() { 
    var value = document.getElementsById('enter')[0].value; 
    var difficulty = "Easy"; 

    if (value > 30) { 
     difficulty = "Impossible!"; 
    } 
    else if (value > 20) { 
     difficulty = "Hard"; 
    } 
    else if (value > 10) { 
     difficulty = "Moderate"; 
    } 
    else { 
     difficulty = "Easy"; 
    } 

    document.getElementById('result').innerHTML = difficulty; 
} 

，或者你可以使用一个switch声明用条件，就像这样：

function update() { 
    var value = document.getElementsById('enter')[0].value; 
    var difficulty; 

    switch (true) { 
    case (value > 20 && value <= 30): 
     difficulty = "Hard"; 
    break; 
    case (value > 10 && value <= 20): 
     difficulty = "Moderate"; 
    break; 
    case (value > 1 && value <= 10): 
     difficulty = "Easy"; 
    default: 
     difficulty = "Impossible!"; 
    break; 
    } 

    document.getElementById('result').innerHTML = difficulty; 
} 

Answer 4

我没有张贴一个链接到的jsfiddle但这里的演示

window.onload=function(){ 
 
    document.getElementById('enter').addEventListener('input', update,false); 
 
} 
 

 
function update() { 
 
var v = document.getElementById('enter').value; 
 
var result; 
 
if ((v > 0) && (v <= 10)) result = "Easy"; 
 
    else if ((v > 11) && (v <= 20)) result = "Moderate"; 
 
    else result = "Hard"; 
 
    document.getElementById('result').value = result; 
 
}

<td>Score:</td> 
 
<td><input type="text" name="enter" id="enter" size="1"/></td> 
 
<td><input type="text" name="result" id="result" disabled/></td>

我建议你剥离除0-9之外的任何输入，并且我已经移除document.getElementsById('enter')[0].value应该是document.getElementById('enter').value。

此外，document.getElementById('result').innerHTML = result;已更改为document.getElementById('result').value = result;，因为您要设置输入元素的值而不是innerHTML。

Edit:(v > 0) if level 1 is selected it will output "hard" as it return true to the else and not the conditions set.

如果您有任何问题，请在下面留言，我会尽快回复您。

我希望这会有所帮助。快乐的编码！