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结果显示在页面

回答

相关问题