这是一个抛硬币随机发生器。我需要打印出 10 行和 20 列。这就是我被困住的地方。每次单击按钮时,我的代码似乎都会正确随机化,它显示 20 列,但我似乎无法让它打印第二行。这可能是一些简单的事情,我只是没有抓住。任何事情将不胜感激。
Javascript Code
function toss()
{
var heads = "x ";
var tails = "o ";
var rows = 0;
while(rows < 10)
{
var arr = new Array(20);
for(var i = 0; i < arr.length; i++)
{
var val = Math.floor( Math.random() * 2 );
if(val === 1)
{
arr[i] = " x";
}
else
{
arr[i] = " y";
}
document.getElementById("results").innerHTML = arr + "<br />";
}
delete arr;
rows++
}
}
.HTML:
<html>
<head>
<title>Coin Flip</title>
<script src="Toss.js" type="text/Javascript"></script>
<style>
#results
{
display: block;
}
</style>
</head>
<body>
Push Button to Flip -> <input type="button" onclick="toss()" value=" Flip ">
<span id="results"></span>
</body>
</html>
问题是每次用新行创建行时都会替换整个结果输出。您需要追加而不是替换。所以改变这个:
document.getElementById("results").innerHTML = arr + "<br />";
自:
document.getElementById("results").innerHTML += arr + "<br />";
您还需要将结果的追加从内部 for 循环中移出!如果将追加保留在for
循环中,您将看到以下行为:http://jsfiddle.net/t1s93Lqz/3/
JSFiddle: http://jsfiddle.net/t1s93Lqz/2/
您正在通过循环每次迭代重置元素内的 html
document.getElementById("results").innerHTML = arr + "<br />";
虽然你可以在每次迭代中连接内部HTML来解决这个问题:
document.getElementById("results").innerHTML += arr + "<br />";
这将导致重新呈现该元素的整个 html。最好先构建 html 字符串,然后设置元素的 innerHTML 属性,或者使用 DOM 方法,如 appendChild/insertAdjacentHTML。
首先构建字符串
var html = "";
while(rows < 10)
{
var arr = new Array(20);
for(var i = 0; i < arr.length; i++) {
var val = Math.floor( Math.random() * 2 );
if(val === 1) {
arr[i] = " x";
} else {
arr[i] = " y";
}
}
//moved the concatenation out of the loop
//otherwise you will get a line each as the array is set
html += arr + "<br />";
rows++
}
document.getElementById("results").innerHTML = html;
使用 insertAdjacentHTML
var element = document.getElementById("results");
while(rows < 10)
{
var arr = new Array(20);
for(var i = 0; i < arr.length; i++) {
var val = Math.floor( Math.random() * 2 );
if(val === 1) {
arr[i] = " x";
} else {
arr[i] = " y";
}
}
element.insertAdjacentHTML('beforeend',arr+"<br />");
rows++
}
演示
var rows = 0;
var element = document.getElementById("results");
while(rows < 10)
{
var arr = new Array(20);
for(var i = 0; i < arr.length; i++) {
var val = Math.floor( Math.random() * 2 );
if(val === 1) {
arr[i] = " x";
} else {
arr[i] = " y";
}
}
element.insertAdjacentHTML('beforeend',arr+"<br />");
rows++
}
<div id="results"></div>
另请注意,您的 delete
语句不会执行任何操作,因为删除适用于对象属性,如果您console.log( delete arr )
,您将看到它将打印false
您只打印最后一行。取代
document.getElementById("results").innerHTML = arr + "<br />";
跟
document.getElementById("results").innerHTML += arr + "<br />";