Question

我已经创建了一个FizzBuzz程序，现在我只想在单击按钮时将它显示在div中。

我创建了一个函数，该函数将在单击按钮时显示div。（fizzbuzzButton）

我要做的就是在Div中显示FizzBuzz函数的结果。

没有简单的方法可以在div中显示函数的结果吗？还是尽管如此，单击按钮后仍显示功能的结果？

我可以使用以下命令在单击按钮时显示它：

<button onclick="FizzBuzz()">Show FizzBuzz</button>

但是在使用document.write时，这会删除其余的HTML。

<!DocType html>
<html>
    <body>

<script type= text/javascript>
var max = 100;

var fizz = "Fizz!";
var buzz = "Buzz!";
var fizzbuzz = "FizzBuzz!";

function FizzBuzz() {
for(var x = (1); x <= max; x++) {
    if(x % 5 == 0 && x % 3 == 0){
       document.write(fizzbuzz, "</br>" )
    }
    else if(x % 3 == 0) {
        document.write(fizz, "</br>")
    }
    else if(x % 5 == 0) {
        document.write(buzz, "</br>")
    }
    else {
        document.write(x, "</br>")
    }   
}

}

 function fizzbuzzButton() {
    document.getElementById('resultDIV').innerHTML = FizzBuzz;
}

</script>

<h1>FIZZ BUZZ!</h1>
<button onclick="fizzbuzzButton()">Show FizzBuzz</button>
<div id="resultDIV">

</div>

</body>
</html>

Answer 1

两个重要问题：

通常避免使用document.write；它仅在初始页面呈现期间有用（在现代工作流程中基本上是没有的）。而是让您的函数将其输出连接成字符串，然后返回该字符串；使用例如将内容放入DOM innerHTML代替document.write。

document.getElementById('resultDIV').innerHTML = FizzBuzz将用函数本身填充div。您要调用该函数并获取其输出，因此请改用FizzBuzz()。

var max = 100;

var fizz = "Fizz!";
var buzz = "Buzz!";
var fizzbuzz = "FizzBuzz!";

function FizzBuzz() {
  var output = "";
  for (var x = (1); x <= max; x++) {
    if (x % 5 == 0 && x % 3 == 0) {
      output += fizzbuzz + "<br>"
    } else if (x % 3 == 0) {
      output += fizz + "<br>"
    } else if (x % 5 == 0) {
      output += buzz + "<br>"
    } else {
      output += x + "<br>"
    }
  }
  return output;

}

function fizzbuzzButton() {
  document.getElementById('resultDIV').innerHTML = FizzBuzz();
}

<h1>FIZZ BUZZ!</h1>
<button onclick="fizzbuzzButton()">Show FizzBuzz</button>
<div id="resultDIV">
</div>

（一个不太重要的问题在上面也发生了变化：</br>无害但不正确，请改用<br>。）

Answer 2

我在您的代码中发现问题并为您解决，创建了一个jsfiddle，看看这对你有帮助 https://jsfiddle.net/wnx50hfr/

<!DocType html>
<html>
    <body>

<script type= text/javascript>
var max = 100;

var fizz = "Fizz!";
var buzz = "Buzz!";
var fizzbuzz = "FizzBuzz!";

function FizzBuzz() {
for(var x = (1); x <= max; x++) {
    if(x % 5 == 0 && x % 3 == 0){
       document.write(fizzbuzz, "</br>" )
    }
    else if(x % 3 == 0) {
        document.write(fizz, "</br>")
    }
    else if(x % 5 == 0) {
        document.write(buzz, "</br>")
    }
    else {
        document.write(x, "</br>")
    }   
}

}

 function fizzbuzzButton() {
    document.getElementById('resultDIV').innerHTML = FizzBuzz;
}

</script>


<h1>FIZZ BUZZ!</h1>
<button onClick="fizzbuzzButton()">Show FizzBuzz</button>
<div id="resultDIV">

</div>

</body>
</html>

Answer 3

仅声明函数fuzzbuzzButton，而没有fizzbuzzButton函数。
如果要运行该功能，应使用FizzBuzz()而不是FizzBuzz。

用

替换功能

function fizzbuzzButton() {
    document.getElementById('resultDIV').innerHTML = FizzBuzz;
}

如果您希望通过此方法向ID为'resultDIV'的div写入数据，则应将结果作为字符串获取，并将其分配给document.getElementById('resultDIV').innerHTML。

如何在DIV标签中显示Javascript函数？

3 个答案: