2015-05-21 2 views
-1

Я пишу «игру предсказания», чтобы получить опыт работы с JavaScript, это игра, в которой вы вводите прогноз футбольного матча, и он должен сказать вам, правильно вы или нет, и опубликовать на странице scorers и некоторые статистики матчей, моя проблема в том, что innerHTML, который должен опубликовать статистику матча, отказывается работать.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>'; 

} 
+1

Что именно не работает? – brso05

+3

'не работает' - не очень полезное описание вашей проблемы. См. Http://stackoverflow.com/help/how-to-ask –

+0

Это не сообщение статистики матча на страницу – AlphaCode

ответ

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

С barcaScore и rivalScore целые числа и значения из входных сигналов строки, вы необходимо изменить его на:

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

или изменить === к ==

0

Это не работает, потому что сбой при отображении Барсы бомбардиров. Это связано с тем, как вы ставите свои бомбардиры в массив.

Видя ваш код, я предпочел бы создать структуру, хранящую счетчики и время вместе в массиве 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>"; 
} 
Смежные вопросы