Javascript根据用户输入值显示循环

时间:2018-03-05 20:24:28

标签: javascript c#

我的网站页面有两个文本框和一个提交按钮。第一个是起始编号,第二个是结束编号。我想在用户单击提交按钮时将两个值之间的所有值打印到段落标记中。例。文本框1 = 5,文本框2 = 15,标记= 5,6,7,8,9,10,11,12,13,14,15。

我让它在具有FizzBu​​zz风格的C#控制台应用程序中满足我的需求:

public static void Main(string[] args)
{
 int start;
 int end;

 Console.WriteLine("Enter number for starting range");
 start = Convert.ToInt32(Console.ReadLine());
 Console.WriteLine("Enter number for ending range");
 end = Convert.ToInt32(Console.ReadLine());

 for(int i = start; i <= end; i++)
  {
   if(i % 3 == 0 && i % 5 == 0)
    {
     Console.WriteLine("FizzBuzz");
    }
   else if(i % 3 == 0 && i % 5 != 0)
    {
     Console.WriteLine("Fizz");
    }
   else if(i % 3 != 0 && i % 5 == 0)
    {
     Console.WriteLine("Buzz");
    }
   else
    {
     Console.WriteLine(i);
    }
  }
}

我的问题是如何使用JavaScript执行此操作? 这是我的非工作代码:

<p>Fizzy</p>
<input type="text" id="start"/>
<input type="text" id="end"/>
<button onclick="myFunction()">Test Me</button>
<p id="result"></p> <-I WANT TO DISPLAY NUMBERS INSIDE THIS TAG

<script type="text/javascript">
 function myFunction() {
  var start = document.getElementById("start").value;
  var end = document.getElementById("end").value;
  var i;

  for(i = start; i <= end; i++)
   {
    if(i % 3 == 0 && i % 5 == 0)
      //Display number as "FizzBuzz"
    else if(i % 3 == 0 && i % 5 != 0)
      //Display number as "Fizz"
    else if( i % 3 != 0 && i % 5 == 0)
      //Display number as "Buzz"
    else
      //Display number
  }
   //I want to assign the "value of the loop" to result
   // "loop result" = document.getElementById("result");
}
</script>

1 个答案:

答案 0 :(得分:0)

您需要使用基本字符串连接在循环中构建字符串,然后将该字符串设置为#result元素的HTML。

function myFunction() {
  var start = document.getElementById("start").value;
  var end = document.getElementById("end").value;
  var i;
  var el = document.getElementById("result");
  var output = "";
  for (i = start; i <= end; i++) {
    if (i % 3 == 0 && i % 5 == 0){
      output += 'FizzBuzz ';
    }
      //Display number as "FizzBuzz"
    else if (i % 3 == 0 && i % 5 != 0){
      output += 'Fizz ';
    }
    else if (i % 3 != 0 && i % 5 == 0){
      output += 'Buzz ';
    }
    else{
      output += i+' ';      
    }
  }
  
  el.innerHTML = output;
}
<p>Fizzy</p>
<input type="text" id="start" />
<input type="text" id="end" />
<button onclick="myFunction()">Test Me</button>
<p id="result"></p>