基于用户输入值的 Javascript 循环显示答案

【问题标题】：Javascript display for loop based on user input values基于用户输入值的 Javascript 循环显示
【发布时间】：2018-03-05 20:24:28
【问题描述】：

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

我让它在一个带有 FizzBuzz 风格的 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>

【问题讨论】：

请同时更改您的 C# 和 JS 代码示例以具有适当的缩进 - 这使它们更易于阅读。
我认为start和end是字符串，把它们变成数字。

标签： javascript c#

【解决方案1】：

您需要使用基本的字符串连接在循环中构建一个字符串，然后将该字符串设置为#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>

【讨论】：