Search code examples
javascripthtmlcreateelement

JavaScript Creating a Paragraph Element w/ ID


I am making a site and I need to make a .js file for a "alt nav" part on my page so that I can link all of the pages to the javascript file and have it include whatever I put in so that it will globally change every page of the site. The problem is, it needs to target paragraphs by ID, so I decided to use a createElement function that creates a paragraph so that it will automatically display. Now I need to figure out how to use the JS to automatically ID the created paragraphs, otherwise I'm defeating the purpose of this trick by going through each page to add a new paragraph for the JS to read. Any ideas? This is what my INDEX page and my JS file looks like.

   <html>
   <head>
        <link rel="shortcut icon" href="favicon.ico">
        <meta name="google-site-verification" content="KfR0LavlyAWWk1rwslU36Ndi2z4YW-ssNwlsfn-Dm7w" />
        <link rel="stylesheet" type="text/css" href="style.css">
        <!-- This Template is a WiP - Please report any bugs to the administrative team at The Gaming           Hideout. Thank you. All rights reserved. -->
  </head>
  <body>
  <div id="wrap">
<div id="header">
    <h1><img src="VexIMG/header.png" alt="The Gaming Hideout" width="760" height="60"></h1>
</div>

<div id="navigation">
<div class="navlinks">
    <ul>
        <li><a href="index.html">About</a></li>
        <li><a href="chat.html">Chat</a></li>
        <li><a href="games.html">Games</a></li>
        <li><a href="gamingreviews.html">The Hideout</a></li>
        <li><a href="contact.html">Contact Us</a></li>
    </ul>
</div>
</div>
    <div id="altnav">
<center><img src="VexIMG/Index/latest.png"></center>
<p id="output2"></p>
<p id="output1"></p>
<script src="latest.js"></script>
    </div>
<div id="body">
    <h2>
        <img src="VexIMG/index/about.png" alt="About Us">
    </h2>
<p><strong>The Gaming Hideout</strong> is a site where any type of gamer, be it Singleplayer, Multiplayer, FPS, RPG, etc; can have fun with other gamers! We include Flash games for now, but soon to be Unity 3D games. You can chat with other users using a live chatroom, or start a discussion with the gaming hideout members, be it a bug report, site or game, funny glitch, or just to say hi and introduce yourself! Irrelevant and/or explicit topics <strong>ARE</strong> allowed, but anything excessively explicit will be locked from replies or deleted at the staff discretion. Finally, if you feel there is a flaw point, glitch, bug, something not right, or just to say hello, you can contact us using the e-mail listed at <a href="contact.html">this</a> page. We hope you enjoy the hideout, and remember; Have fun!</p>
</div>
<div id="footer">
<div id="copyright">
Copyright © The Gaming Hideout<br>
We own no rights on any game on this site unless otherwise noted.<br>
All Rights Reserved.
</div>
<div id="footnav">
    <ul>
        <li><a href="contact.html">Contact Us</a></li>
        <li><a href="gamingreviews.html">The Hideout</a></li>
        <li><a href="games.html">Games</a></li>
        <li><a href="chat.html">Chat</a></li>
        <li><a href="index.html">About</a></li>
    </ul>
</div>

Here's the JavaScript.

var i;
var out = document.getElementById("output1");
var args = ["Thursday, September 4th, 2014", "The site has been launched! The Chat page has yet        to be launched, and we are now primarily focusing on transferring over games from our old hosted   site, so sorry for the little games! We also have to upgrade our storage soon for more games, so  please donate for a faster game time!",];
function displayArgs() {
    "use strict";
    for (i = 0; i < args.length; i++) {
        out.appendChild(document.createTextNode(args[i]));
        out.appendChild(document.createElement("br"));
    }
}
displayArgs(args);

var i;
var out = document.getElementById("output2");
var args = ["Monday, September 15th, 2014", "The host is learning JavaScript, so be ready for a      LOT of new changes!",];
function displayArgs() {
    "use strict";
    for (i = 0; i < args.length; i++) {
        out.appendChild(document.createTextNode(args[i]));
        out.appendChild(document.createElement("br"));
    }
}
displayArgs(args);

All I want is to be able to use a create paragraph element function and also ID it by locating its tag as a P element or somehow, someway, just be able to automatically create a paragraph using a createElement function and automatically ID it as "output3", "output4". This will help alot!


Solution

  • not extra comma in array 'var out'
    'createTextNode' works when the page is loaded.

    window.onload = function() {
    var i;
    var document=window.document;
    var out = document.getElementById("output1");
    var args = ["Thursday, September 4th, 2014", "The site has been launched! The Chat page has yet        to be launched, and we are now primarily focusing on transferring over games from our old hosted   site, so sorry for the little games! We also have to upgrade our storage soon for more games, so  please donate for a faster game time!"];
    function displayArgs() {
        "use strict";
        for (i = 0; i < args.length; i++) {
            out.appendChild(document.createTextNode(args[i]));
            out.appendChild(document.createElement("br"));
        }
    }
    displayArgs(args);
    };