JSON - 使JSON結果顯示在頁面

我目前正在製作一個簡單的網絡應用程序，其中涉及用戶輸入分數預測本地存儲。該應用程序的一個功能是使用JSON來檢索我製作的虛構足球比分。JSON - 使JSON結果顯示在頁面

但是，當我點擊「顯示燈具」按鈕時，結果會顯示在空白屏幕上，並且它們不會顯示在我的樣式HTML文件中。

任何人都可以讓我知道我怎麼能在我的網頁上顯示結果？

這是我的html文件。

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8" /> 
    <title>Premier League Site</title> 
    <link rel="stylesheet" href="style.css"/> 
</head> 
<body> 
<script src="elliot.js"></script> 

    <div id="wrapper"> 
    <header id="header"> 
    <h1>Premier League Site</h1> 
    </header> 

    <nav id ="Menu_Bar"> 
    <ul> 
     <li>Home</li> 
     <li>Teams</li> 
     <li>Extras</li> 
    </ul> 

    </nav> 

    <section id="fixtures"> 

<input type="button" id="fixtures" value="Show Fixtures" onclick="fixtures()"> 

    </section> 

    <section id="sectionone"> 
    What is the score for Game one? 
     <form> 
      <p>Home: <input type="number" id="one"></p> 
      <p>Away: <input type="number" id="two"></p> 
      <p><input type="button" id="button" value="Save"></p> 
      <p><input type="button" id="dbutton" value="Delete" onclick="deleteKey()"></p> 
      <p><input type="button" id="clear" value="Clear All" onclick="clearAll();" ></p> 
     </form> 
    </section> 
    <section id="sectiontwo"> 
     Stored Info should go here 
    </section> 
    <section id="sectionthree"> 
    What is the score for Game two? 
     <form> 
      <p>Home: <input type="number" id="three"></p> 
      <p>Away: <input type="number" id="four"></p> 
      <p><input type="button" id="buttontwo" value="Save"></p> 
      <p><input type="button" id="dbuttontwo" value="Delete" onclick="deleteKeytwo()"></p> 
      <p><input type="button" id="cleartwo" value="Clear All" onclick="clearAlltwo();" ></p> 
     </form>  
    </section> 
    <section id="sectionfour"> 
     Stored Info should go here 
    </section> 
<section id="sectionfive"> 
    What is the score for Game three? 
     <form> 
      <p>Home: <input type="number" id="five"></p> 
      <p>Away: <input type="number" id="six"></p> 
      <p><input type="button" id="buttonthree" value="Save"></p> 
      <p><input type="button" id="dbuttonthree" value="Delete" onclick="deleteKeythree()"></p> 
      <p><input type="button" id="clearthree" value="Clear All" onclick="clearAllthree();" ></p> 
     </form>  
    </section> 
    <section id="sectionsix"> 
     Stored Info should go here 
    </section> 
<section id="sectionseven"> 
    What is the score for Game four? 
     <form> 
      <p>Home: <input type="number" id="seven"></p> 
      <p>Away: <input type="number" id="eight"></p> 
      <p><input type="button" id="buttonfour" value="Save"></p> 
      <p><input type="button" id="dbuttonfour" value="Delete" onclick="deleteKeyfour()"></p> 
      <p><input type="button" id="clearfour" value="Clear All" onclick="clearAllfour();" ></p> 
     </form>  
    </section> 
    <section id="sectioneight"> 
     Stored Info should go here 
    </section>  
    <section id="sectionnine"> 
    What is the score for Game five? 
     <form> 
      <p>Home: <input type="number" id="nine"></p> 
      <p>Away: <input type="number" id="ten"></p> 
      <p><input type="button" id="buttonfive" value="Save"></p> 
      <p><input type="button" id="dbuttonfive" value="Delete" onclick="deleteKeyfive()"></p> 
      <p><input type="button" id="clearfive" value="Clear All" onclick="clearAllfive();" ></p> 
     </form>  
    </section> 
    <section id="sectionten"> 
     Stored Info should go here 
    </section> 
    <section id="sectioneleven"> 
    What is the score for Game six? 
     <form> 
      <p>Home: <input type="number" id="eleven"></p> 
      <p>Away: <input type="number" id="twelve"></p> 
      <p><input type="button" id="buttonsix" value="Save"></p> 
      <p><input type="button" id="dbuttonsix" value="Delete" onclick="deleteKeysix()"></p> 
      <p><input type="button" id="clearsix" value="Clear All" onclick="clearAllsix();" ></p> 
     </form>  
    </section> 
    <section id="sectiontwelve"> 
     Stored Info should go here 
    </section> 
    <section id="sectionthirteen"> 
    What is the score for Game seven? 
     <form> 
      <p>Home: <input type="number" id="thirteen"></p> 
      <p>Away: <input type="number" id="fourteen"></p> 
      <p><input type="button" id="buttonseven" value="Save"></p> 
      <p><input type="button" id="dbuttonseven" value="Delete" onclick="deleteKeyseven()"></p> 
      <p><input type="button" id="clearseven" value="Clear All" onclick="clearAllseven();" ></p> 
     </form>  
    </section> 
    <section id="sectionfourteen"> 
     Stored Info should go here 
    </section> 
    <section id="sectionfifteen"> 
    What is the score for Game eight? 
     <form> 
      <p>Home: <input type="number" id="fifteen"></p> 
      <p>Away: <input type="number" id="sixteen"></p> 
      <p><input type="button" id="buttoneight" value="Save"></p> 
      <p><input type="button" id="dbuttoneight" value="Delete" onclick="deleteKeyeight()"></p> 
      <p><input type="button" id="cleareight" value="Clear All" onclick="clearAlleight();" ></p> 
     </form>  
    </section> 
    <section id="sectionsixteen"> 
     Stored Info should go here 
    </section> 
    <section id="sectionseventeen"> 
    What is the score for Game nine? 
     <form> 
      <p>Home: <input type="number" id="seventeen"></p> 
      <p>Away: <input type="number" id="eighteen"></p> 
      <p><input type="button" id="buttonnine" value="Save"></p> 
      <p><input type="button" id="dbuttonnine" value="Delete" onclick="deleteKeynine()"></p> 
      <p><input type="button" id="clearnine" value="Clear All" onclick="clearAllnine();" ></p> 
     </form>  
    </section> 
    <section id="sectioneighteen"> 
     Stored Info should go here 
    </section> 
    <section id="sectionnineteen"> 
    What is the score for Game ten? 
     <form> 
      <p>Home: <input type="number" id="nineteen"></p> 
      <p>Away: <input type="number" id="twenty"></p> 
      <p><input type="button" id="buttonten" value="Save"></p> 
      <p><input type="button" id="dbuttonten" value="Delete" onclick="deleteKeyten()"></p> 
      <p><input type="button" id="clearten" value="Clear All" onclick="clearAllten();" ></p> 
     </form>  
    </section> 
    <section id="sectiontwenty"> 
     Stored Info should go here 
    </section> 
    <body onload="drawCanvas();"> 
    <div> 
     <canvas id="myCanvas" width="540" height="200"> 
      <p>Your browser doesn't support canvas.</p> 
     </canvas> 
    </div> 
</body> 

<script> 
var surface; 
var footy; 
var x = 50; 
var y = 0; 
var dirX = 3; 
var dirY = 3; 

function drawCanvas() { 
    // Get our Canvas element 
    surface = document.getElementById("myCanvas"); 

    if (surface.getContext) { 
     // If Canvas is supported, load the image 
     footy = new Image(); 
     footy.onload = loadingComplete; 
     footy.src = "football.png"; 
    } 
} 

function loadingComplete(e) { 
    // When the image has loaded begin the loop 
    setInterval(loop, 25); 
} 

function loop() { 
    // Each loop we move the image by altering its x/y position 

    // Grab the context 
    var surfaceContext = surface.getContext('2d'); 

    // Clear the canvas to White 
    surfaceContext.fillStyle = "rgb(255,255,255)"; 
    surfaceContext.fillRect(0, 0, surface.width, surface.height); 

    // Draw the image 
    surfaceContext.drawImage(footy, x, y); 

    x += dirX; 
    y += dirY; 

    if (x <= 0 || x > 540 - 50) { 
     dirX = -dirX; 
    } 
    if (y <= 0 || y > 200 - 50) { 
     dirY = -dirY; 
    } 
} 
</script> 
    <footer id="footer"> 
     Elliot Harrison 2014 
    </footer> 
    </div> 
</body> 
</html>

這裏是我在我的Javascript文件中的燈具代碼。

function fixtures(){ 

var obj1 = {Game: "Game One", Home:"Arsenal", Away:"Norwich"}; 
var obj2 = {Game: "Game Two", Home:"Cardiff", Away:"Aston Villa"}; 
var obj3 = {Game: "Game Three", Home:"Crystal Palace", Away:"Chelsea"}; 
var obj4 = {Game: "Game Four", Home:"Manchester United", Away:"Newcastle United"}; 
var obj5 = {Game: "Game Five", Home:"Fulham", Away:"Hull City"}; 
var obj6 = {Game: "Game Six", Home:"Swansea", Away:"Manchester City"}; 
var obj7 = {Game: "Game Seven", Home:"Sunderland", Away:"Stoke"}; 
var obj8 = {Game: "Game Eight", Home:"West Bromwich Albion", Away:"Everton"}; 
var obj9 = {Game: "Game Nine", Home:"Southampton", Away:"West Ham United"}; 
var obj10 = {Game: "Game Ten", Home:"Tottenham Hotspurs", Away:"Liverpool"}; 

document.write(obj1.Game+" - "+obj1.Home+" Vs "+obj1.Away); 
document.write("</br>") 
document.write(obj2.Game+" - "+obj2.Home+" Vs "+obj2.Away); 
document.write("</br>") 
document.write(obj3.Game+" - "+obj3.Home+" Vs "+obj3.Away); 
document.write("</br>") 
document.write(obj4.Game+" - "+obj4.Home+" Vs "+obj4.Away); 
document.write("</br>") 
document.write(obj5.Game+" - "+obj5.Home+" Vs "+obj5.Away); 
document.write("</br>") 
document.write(obj6.Game+" - "+obj6.Home+" Vs "+obj6.Away); 
document.write("</br>") 
document.write(obj7.Game+" - "+obj7.Home+" Vs "+obj7.Away); 
document.write("</br>") 
document.write(obj8.Game+" - "+obj8.Home+" Vs "+obj8.Away); 
document.write("</br>") 
document.write(obj9.Game+" - "+obj9.Home+" Vs "+obj9.Away); 
document.write("</br>") 
document.write(obj10.Game+" - "+obj10.Home+" Vs "+obj10.Away); 
document.write("</br>") 
}

謝謝你們。

來源

2014-01-11 user3170711

您是否嘗試過在Chrome或Firefox中使用內置的調試器？ –

我沒有看到一個名爲'fixtures（）'的功能 – geedubb

你要生成html代碼，然後將其插入容器中。

首先，創建容器，比方說<div id="container"></div>。

然後生成html代碼：

var html = ''; 
html += obj1.Game+' - '+obj1.Home+' Vs '+obj1.Away + '<br />'; 
html += obj2.Game+' - '+obj2.Home+' Vs '+obj2.Away + '<br />'; 
html += obj3.Game+' - '+obj3.Home+' Vs '+obj3.Away + '<br />'; 
...

最後插入代碼：

document.getElementById('container').innerHTML = html;

附：而且你的頁面只能有一個body標籤。刪除第二個，然後將onload="drawCanvas();"插入第一個。

來源

2014-01-11 13:40:59 Curious

感謝關於身體標籤的頭像，忘記了甚至是這樣的！而且，謝謝你的答案！ – user3170711

@ user3170711不成問題） – Curious

如果我沒記錯，document.write（arg）用arg替換整個文檔。你最後的電話是斷線，這就是你的文件爲空的原因。

您應該使用DOM操作附加文本。

這裏有一個關於這個主題：Add elements to the DOM given plain text HTML using only pure JavaScript (no jQuery)

來源

2014-01-11 13:35:18

JSON - 使JSON結果顯示在頁面

回答

相關問題