Question

我正在编写一个“预测游戏”，只是为了获得JavaScript的经验，这是一个你输入足球比赛预测的游戏，它应该告诉你你是对还是错，并在页面上发布得分手和一些比赛统计数据，我的问题是innerHTML应该发布匹配统计数据拒绝工作。

这是HTML：

<!DOCTYPE html>

<html lang="he">
<head>
    <meta charset="utf-8" />
    <link rel="stylesheet" type="text/css" href="css/StyleSheet.css" />
    <link rel="stylesheet" type="text/css" href="css/normalize.css" />
    <title>Match Randomizer</title>
</head>
<body>
    <div id="container">
    <h1 id="title">Predict The Match Score!</h1>
        <div class="top">
        <img id="barcaLogo" src="Pics/Fc_barcelona.png" alt="logo">
        <img id="juveLogo" src="Pics/Juventus-logo.png" alt="logo">
        <form id="form">
            Barca:<input type="text" name="Barca" id="barcaPrediction"></br>
            Rival:<input type="text" name="Rival" id="rivalPrediction"></br>
            <input type="button" value="Show Me The Real Score!" onclick="scoreRandom()">
        </form>
        </div>
        <div class="main">
        <div id="barcaScorers" class="stats">Scorers:</div>
        <div id="stats" class="stats">Scorers:</div>
        <div id="juveScorers" class="stats">Scorers:</div>
        </div>
    </div>
    <script src="js/Script.js"></script>
</body>

和JS代码：

function scoreRandom()
{
    var barcaPrediction = document.getElementById('barcaPrediction');
    var rivalPrediction = document.getElementById('rivalPrediction');
    var barcaScore = Math.floor(Math.random() * 10);
    var rivalScore = Math.floor(Math.random() * 10);
    var barcaPlayers = ['M.ter Stegen','J.Alba','M.Bartra','D.Alves','G.Pique','Xavi','A.Iniesta','Sergio.B','Neymar','L.Suarez','L.Messi'];
    var barcaScorers = [];
    var timeGame = [];
    var timeStart = 0;
    var num;
    ////////////////////////////////
    ///Number randomizer function///
    ////////////////////////////////
    var randomNum = function(min , max)
    {
         num = Math.floor(Math.random() * max + min);
         return num;
    };
    console.log(randomNum(1,5));
    ////////////////////////////////
    ///Checks if the form is empty//
    ////////////////////////////////
    if(barcaPrediction.value === '' || rivalPrediction.value === ''||barcaPrediction.value === isNaN || rivalPrediction.value === isNaN)
    { alert('Please enter your prediction!'); }

    document.getElementById('form').innerHTML = '<h1>' + barcaScore + ' - ' + rivalScore + '</h1>';

    ///////////////////////////////////////////
    ///Checks if your guess is right or wrong//
    ///////////////////////////////////////////
    if(barcaScore === barcaPrediction.value && rivalScore === rivalPrediction.value)
        document.getElementById('title').innerHTML = '<h1>You were right!</h1>';
    else
        document.getElementById('title').innerHTML = '<h1>You were wrong!</h1>';

    ///////////////////////////////////////////////
    ///Pushing the scorers from barcaPlaers array//
    ///////////////////////////////////////////////
   for (var i = 0; i < barcaScore; i++ )
    {
        barcaScorers.push(barcaPlayers[Math.floor(Math.random() * 10)]);
        rand_number = Math.floor(Math.random()*90+1);
        timeGame.push(rand_number);
        for (var j = 0; j < barcaScore; j++)
        {
            barcaScorers.push(barcaPlayers[Math.floor(Math.random() * 10+1)]);
        }
    }
    ////////////////////////////////////////////////////////////////////////////////
    ///Sorting the time from small to big, and outputing it with the scorers names//
    ////////////////////////////////////////////////////////////////////////////////
    timeGame.sort(function(a, b){return a-b});
   for (i=0; i < timeGame.length; i++){
             document.getElementById("barcaScorers").innerHTML += '<p>'+barcaScorers[Math.floor(Math.random() * 10)]+' '+timeGame[i]+"'</p>";
}
    ////////////////////////////
    ///RANDOMIZING MATCH STATS//
    ////////////////////////////
    var shots = randomNum(barcaScore, 20);
    var shotsOnTarget = randomNum(barcaScore, shots);
    var possesion;
    var tackles = randomNum(0, 15);
    var fouls = randomNum(tackles, 20);
    var yellowCards = randomNum(tackles, fouls);
    var redCards = randomNum(yellowCards, 3);
    var offsides = randomNum(0, barcaScore);
    var corners = randomNum(0,shots);


    document.getElementById("stats").innerHTML += '<p> Shots:' + shots + 'Shots on target: ' + shotsOnTarget + '</p>';

}

Answer 1

if(barcaScore === barcaPrediction.value && rivalScore === rivalPrediction.value)

由于barcaScore和rivalScore是整数，输入中的值是字符串，因此需要将其更改为：

if(barcaScore === parseInt(barcaPrediction.value) && rivalScore === parseInt(rivalPrediction.value))

或将===更改为==

Answer 2

这不起作用，因为它在显示barca得分手时会崩溃。这是由于你将得分手放入阵列的方式。

看到你的代码我宁愿在barcaScorers数组中创建一个存储记分员和时间的结构。

///////////////////////////////////////////////
///Pushing the scorers from barcaPlaers array//
///////////////////////////////////////////////
for (var i = 0; i < barcaScore; i++ )
{
    var newBarcaScorers = {};
    newBarcaScorers.time = Math.floor(Math.random()*90+1);
    newBarcaScorers.player = barcaPlayers[Math.floor(Math.random() * 10)];
    barcaScorers.push(newBarcaScorers);
}

所以你可以像这样有效地展示它们：

////////////////////////////////////////////////////////////////////////////////
///Sorting the time from small to big, and outputing it with the scorers names//
////////////////////////////////////////////////////////////////////////////////
barcaScorers.sort(function(a, b){return a.time > b.time});
for (i=0; i < barcaScorers.length; i++){
    document.getElementById("barcaScorers").innerHTML += '<p>'+barcaScorers[i].player+' '+barcaScorers[i].time+"'</p>";
}

innerHTML不起作用

2 个答案: