Question

首先，让我解释一下我的代码。我创造了一个游戏，当你“戳”这个怪物时，它会产生1到100之间的随机数。如果那个随机数等于5，你就赢了，如果没有，它说你死了，计时器持续2秒然后刷新页面，让你再次“戳”。它只用了一句话回复，但为了加强它，我想添加一系列可能的死亡句子，这样当你点击图像然后松开时，那些句子中的一个被随机挑选，这就是响应。

我的JS代码：

var myTimer;
//Timer that reloads the page
function myTimerF() {
    var x = document.getElementById("Button");
    x.innerHTML = "<img src='poke.png' >";
    clearInterval(myTimer);
}

//generates a random number then checks if you won or not
function randomNumber() {
    var res = Math.floor((Math.random() * 100) + 1);

    var x = document.getElementById("Button")
    if (res == 5)
        x.innerHTML = "Winner! YOU ACTUALLY WON! IT'S A MIRICALE!";
    else

    function getRandomSentence() {
        var index = Math.floor(Math.random() * (maxSentences - 1));
        return sentences[index];
    }

    myTimer = setInterval(function () {
        myTimerF()
    }, 2000);
}
//Random death sentences
var sentences = [
    'You just got eaten! Try again in 2 seconds.',
    'You are currently being digested. Try again in 2 seconds.',
    'You have been incinerated, you may poke the monster in 2 seconds again.',
    'Your head has been removed from your body, try again in 2 seconds when we find it.',
    'You have been neautrilized. Try again in 2 seconds.',
    'You ran away out of fear. Try again in 2 seconds.',
    'Your legs are currently in the belly of the monster, try again in 2 seconds.'
],
maxSentences = sentences.length;

我的HTML代码：

<p id="Button" onclick="randomNumber()">
  <img src="poke.png" >
</p>

我的问题是随机数组不起作用。单击图像按钮时，没有任何反应。

Answer 1

在这里，我把它变成了一个正常工作的JSFiddle：test it out

将所有变量向上声明（无论如何都会被提升）：

var myTimer,
    x = document.getElementById("button"),
    sentences = [ //Random death sentences
           'You just got eaten! Try again in 2 seconds.',
           'You are currently being digested. Try again in 2 seconds.',
           'You have been incinerated, you may poke the monster in 2 seconds again.',
           'Your head has been removed from your body, try again in 2 seconds when we find it.',
           'You have been neutralized. Try again in 2 seconds.',
           'You ran away out of fear. Try again in 2 seconds.',
           'Your legs are currently in the belly of the monster, try again in 2 seconds.'
        ],
    maxSentences = sentences.length;

添加了一个事件监听器：

x.addEventListener('click', randomNumber, false);

这是你的计时器。我们立即调用它来初始化您的代码：

//Timer that reloads the page
function myTimerF() {
    x.innerHTML = "<img src='http://lorempixel.com/640/480/abstract/' >";
    clearInterval(myTimer);
}

myTimerF();

最后还有你需要的其他两个功能：

//Produces random sentence, obviously
function getRandomSentence() {
    var index = Math.floor( Math.random() * (maxSentences - 1) ),
        randoSen = sentences[index];
    console.log('rando sentence #: ' + index);
    x.innerHTML = randoSen;
}

//generates a random number then checks if you won or not
function randomNumber() {
    var res = Math.floor((Math.random()*100)+1);
    console.log('random number 1 - 100 is: ' + res);
    if (res == 5) {
        x.innerHTML = "Winner! YOU ACTUALLY WON! IT'S A MIRICALE!";
    } else { getRandomSentence(); }

    myTimer=setInterval(function(){myTimerF()},2000);
}

Answer 2

我将getRandomSentence()函数移出else语句，低于其他函数。该函数甚至没有被调用，所以我将函数调用添加到else语句中。我将setInterval更改为setTimeout，因为它只需要调用一次（setInterval用于重复间隔，setTimeout仅被触发一次。）

//Timer that reloads the page
function myTimerF() {
    var x = document.getElementById("Button");
    x.innerHTML = "<img src='poke.png' >";
}

//generates a random number then checks if you won or not
function randomNumber() {
    var res = Math.floor((Math.random() * 100) + 1);

    var x = document.getElementById("Button")
    if (res == 5)
        x.innerHTML = "Winner! YOU ACTUALLY WON! IT'S A MIRICALE!";
    else {
        x.innerHTML = getRandomSentence();
        myTimer = setTimeout(myTimerF, 2000);
    }
}

function getRandomSentence() {
    var index = Math.floor(Math.random() * (maxSentences - 1));
    return sentences[index];
}

//Random death sentences
var sentences = [
    'You just got eaten! Try again in 2 seconds.',
    'You are currently being digested. Try again in 2 seconds.',
    'You have been incinerated, you may poke the monster in 2 seconds again.',
    'Your head has been removed from your body, try again in 2 seconds when we find it.',
    'You have been neautrilized. Try again in 2 seconds.',
    'You ran away out of fear. Try again in 2 seconds.',
    'Your legs are currently in the belly of the monster, try again in 2 seconds.'
],
maxSentences = sentences.length;

从JS数组中挑选的随机句子作为响应

2 个答案: