Question

我正在尝试对单击按钮时调用外部.js脚本的游戏进行编码。代码以我想要的方式工作，但我对如何将输出转换为HTML以使其格式化得有点困惑。按钮应该在单击时重新启动该过程（即无需重新加载页面），以便进行新的随机选择。

我最终还想要包含一个按钮来删除最后显示的项目，但这是为了以后......

使用Javascript：

var basket = ['apple', 'banana', 'cherry', 'durian', 'eggplant', 'fig', 'grapes', 'huckleberry', 'kiwi', 'lemon', 'mango'];

function randOrd(){
return (Math.round(Math.random())-0.5); } 

mixedBasket = basket.sort( randOrd ); //randomize the array

var i = 0;  // the index of the current item to show

fruitDisplay = setInterval(function() {            
document
    .getElementById('fruit')
    .innerHTML = mixedBasket[i++];    // get the item and increment
if (i == mixedBasket.length) i = 0;   // reset to first element if you've reached the end
}, 70);  //speed to display items

var endFruitDisplay = setTimeout(function( ) { clearInterval(fruitDisplay); }, 3000); 
//stop display after x milliseconds

当前的HTML显然会运行代码，但它会在单击按钮之前启动。

HTML：

<head><script type="text/javascript" src="Fruitpicker3.js"></script></head>
<body>
<span id = "fruit"> </span>
<input type="button" onclick="fruit" value="Start"/>
</body>
</html>

提前感谢您的帮助！

Answer 1

您的setInterval调用不在函数内部，因此在下载并执行.js文件时，它会立即执行该方法。最简单的解决方案是将调用包含在函数内部setInterval，然后在按钮的onClick事件中调用该函数。

按钮从外部脚本调用ID

1 个答案: