Возврат строки на основе значения между двумя целыми числами

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 is >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.

Если у вас есть какие-либо вопросы, пожалуйста, оставьте комментарий ниже, и я свяжусь с вами как можно скорее.

Надеюсь, это поможет. Счастливое кодирование!