Есть ли какой-нибудь способ сократить это или сделать это более чистым?
Confirm that value was indeed between 1 and 20. If it is not, output a message reminding them that they must enter a value between 1 and 20, and then do not continue with the function (make the function end). Hint: Remember that a 'return' staement will a function. If the user enters invalid input, then output the appropriate message (e.g. "You must enter a number between 1 and 20") to a div section called 'errors'. Also set the background color of the invalid text field to yellow. Note: Each time the user clicks the button, you should remove any output from a previous run of the program. If any errors are present, you should remove any error messages, and remove the yellow background from the text field.
Что я уже пробовал:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>First Loop</title>
<style type="text/css">
.highlight { background-color:yellow; color:red; }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js" ></script>
<script type="text/javascript">
$(document).ready(function()
{
});
function greetMe()
{
//first clear out anything that was there before
$('#greetings').html('');
//remove highlight from any inputs remaining from a previous submit attempt
$('input').removeClass('highlight');
//clears out anything that was there before
$('#errors').html('');
//retrieve the name that the user has entered
var name = document.getElementById('txtName').value;
//retrieve the number that the user has entered
var str = parseInt($('#txtNum').val());
if (str == 1){
for (var counter=0; counter<1; counter=counter+1)
{
$('#greetings').append("Hello, " + name + "!<br />");
}
}
else if (str == 2){
for (var counter=0; counter<2; counter=counter+1)
{
$('#greetings').append("Hello, " + name + "!<br />");
}
}
else if (str == 3){
for (var counter=0; counter<3; counter=counter+1)
{
$('#greetings').append("Hello, " + name + "!<br />");
}
}
else if (str == 4){
for (var counter=0; counter<4; counter=counter+1)
{
$('#greetings').append("Hello, " + name + "!<br />");
}
}
else if (str == 5){
for (var counter=0; counter<5; counter=counter+1)
{
$('#greetings').append("Hello, " + name + "!<br />");
}
}
else if (str == 6){
for (var counter=0; counter<6; counter=counter+1)
{
$('#greetings').append("Hello, " + name + "!<br />");
}
}
else if (str == 7){
for (var counter=0; counter<7; counter=counter+1)
{
$('#greetings').append("Hello, " + name + "!<br />");
}
}
else if (str == 8){
for (var counter=0; counter<8; counter=counter+1)
{
$('#greetings').append("Hello, " + name + "!<br />");
}
}
else if (str == 10){
for (var counter=0; counter<10; counter=counter+1)
{
$('#greetings').append("Hello, " + name + "!<br />");
}
}
else if (str == 11){
for (var counter=0; counter<11; counter=counter+1)
{
$('#greetings').append("Hello, " + name + "!<br />");
}
}
else if (str == 12){
for (var counter=0; counter<12; counter=counter+1)
{
$('#greetings').append("Hello, " + name + "!<br />");
}
}
else if (str == 13){
for (var counter=0; counter<13; counter=counter+1)
{
$('#greetings').append("Hello, " + name + "!<br />");
}
}
else if (str == 14){
for (var counter=0; counter<14; counter=counter+1)
{
$('#greetings').append("Hello, " + name + "!<br />");
}
}
else if (str == 15){
for (var counter=0; counter<15; counter=counter+1)
{
$('#greetings').append("Hello, " + name + "!<br />");
}
}
else if (str == 16){
for (var counter=0; counter<16; counter=counter+1)
{
$('#greetings').append("Hello, " + name + "!<br />");
}
}
else if (str == 17){
for (var counter=0; counter<17; counter=counter+1)
{
$('#greetings').append("Hello, " + name + "!<br />");
}
}
else if (str == 18){
for (var counter=0; counter<18; counter=counter+1)
{
$('#greetings').append("Hello, " + name + "!<br />");
}
}
else if (str == 19){
for (var counter=0; counter<19; counter=counter+1)
{
$('#greetings').append("Hello, " + name + "!<br />");
}
}
else if (str == 20){
for (var counter=0; counter<20; counter=counter+1)
{
$('#greetings').append("Hello, " + name + "!<br />");
}
}
else {
$('#errors').append("You must enter a number between 1 and 20!");
$('#txtNum').addClass('highlight');
return false; //ends the function
}
} //end greetMe
</script>
</head>
<body>
<p>Type in your name.</p>
<input type="text" id="txtName" >
<p>How many times would you like to be greeted? (1 - 20)</p>
<input type="text" id="txtNum">
<input type="button" value="Greet Me!" onclick="greetMe()" >
<hr>
<div id="greetings">
<!-- Section to output the greeting -->
</div>
<div id="errors">
<!-- section to output the invalid input message -->
</div>
</body>
</html>
ZurdoDev
Один из способов выяснить, можете ли вы очистить код, - это посмотреть, повторяете ли вы код. И это действительно так, много раз. Каждый оператор if является одним и тем же, за исключением счетчика. Все, что вам нужно сделать, это изменить его на переменную.
Richard Deeming
Подсказка: if (str >= 1 && str <= 20)
и: for (var counter = 0; counter < str; counter++)