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

这可以更具可读性！

如果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 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

<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 4

我确实发布了一个jsfiddle的链接，但这里是演示

＆＃13;

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;
}

＆＃13;

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

＆＃13;

我建议您为该输入删除0到9之外的任何内容，而我已删除的document.getElementsById('enter')[0].value应为document.getElementById('enter').value。

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

修改： (v > 0)如果选择了第1级，它将输出＆＃34; hard＆＃34;因为它返回true而不是设置的条件。

如果您有任何疑问，请在下方发表评论，我会尽快回复您。

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

根据两个整数

4 个答案: