JSON - Making JSON results display on page

Question

I'm currently making a simple web app which involves users inputting there score predictions to local storage. One feature of the app is using JSON to retrieve the fictional football scores I have made.

However, when I click the button to "Show Fixtures" the results end up posted on a blank screen and they do not display in my styled HTML file.

Can anyone please let me know how I could display the results on to my page?

Here is my html file.

<!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>

And here is my fixtures code in my Javascript file.

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>")
}

Thanks guys.

have you tried using the built-in debuggers in Chrome or Firefox? — Robin Green, Jan 11 '14 at 13:31

score 1 · Accepted Answer · answered Jan 11 '14 at 13:40

1

You have to generate html code and then insert it into the container.

First, create container, let's say <div id="container"></div>.

Then generate html code:

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 />';
...

And finally insert the code:

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

P.S. And you should have only one body tag in your page. Remove the second one, and insert onload="drawCanvas();" into the first one.

answered Jan 11 '14 at 13:40

Oleg

22,300
9
68
84

Thanks for the heads up about the body tags, forgot that what was even like that! And also, thanks for the answer! – user3170711 Jan 11 '14 at 13:46
@user3170711 not a problem ) – Oleg Jan 11 '14 at 13:47

score 0 · Answer 2 · edited May 23 '17 at 11:49

0

If I remember well, document.write(arg) replace the whole document by arg. Your last call is a break line that's why your document is empty.

You should append text using DOM manipulation.

Here is a thread about this : Add elements to the DOM given plain text HTML using only pure JavaScript (no jQuery)

edited May 23 '17 at 11:49

Community

1
1

answered Jan 11 '14 at 13:35

DARK_DUCK

1,727
2
12
22

JSON - Making JSON results display on page

2 Answers2