我目前正在制作一个简单的网络应用程序，其中涉及用户在本地存储中输入得分预测。该应用程序的一个功能是使用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>")
}
谢谢你们。
答案 0 :(得分：1)
您必须生成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;
P.S。并且您的页面中只应有一个body标记。删除第二个，然后将onload="drawCanvas();"插入第一个。
答案 1 :(得分：0)
如果我记得很清楚，document.write（arg）会用arg替换整个文档。你的最后一个电话是一个中断线，这就是你的文件为空的原因。
您应该使用DOM操作附加文本。
以下是关于此问题的主题：Add elements to the DOM given plain text HTML using only pure JavaScript (no jQuery)