3

To start, I'm a bit of a novice. I've been trying to create a JS file to contain all my text variables to use in my HTML file(among other functions). My JS file is located in the same directory as my HTML file (C:/websites/first). My CSS file has linked and works properly, confusing me on why this isn't working.

I've tried working with answers from these posts and a few others, with no luck:

Set content of HTML <span> with Javascript

How do I change the text of a span element in JavaScript

How to pass Variable from External JavaScript to HTML Form

What I'm trying to do here is set my

to contain my fullname var. Once I get this the rest of my problems should be resolved too.

here's a snippet of my JS:

    var fullname = "example";
    document.getElementById('fullname').innerHTML = fullname;

and a snippet of my HTML:

    <html>
     <head>
        <script type="text/javascript" src="script.js"></script>
     </head>
     <body>
        <p id="fullname"></p>
     </body>
    </html>

I can't find what i'm doing wrong. I've been ripping my hair out because it is so simple but I haven't found a solution.

Community
  • 1
  • 1
user3524785
  • 81
  • 8
  • Several answers would help, but may I suggest using PHP if you want to use variables? JS happens on client-side rather than server-side, which means that it happens AFTER the page is sent to your user's browser. They may see a flash as the information is placed in the page. – Kelderic Apr 11 '14 at 18:03
  • 1
    @AndyM I think OP is trying to learn javascript. PHP isn't related. – Carrie Kendall Apr 11 '14 at 18:06
  • I haven't quite started learning PHP yet, but I think I'll jump on that right now, seems fairly mandatory for what I want to do. – user3524785 Apr 11 '14 at 18:08
  • It's related because PHP is better than JS for the use that OP is trying to do (variables in HTML), for the above reasons. It's not an answer though, which is why I used a comment. Quote from official policy: [Comments should be used to] "Add relevant but minor or transient information to a post" – Kelderic Apr 11 '14 at 18:10
  • I've never liked hard coding strings into code, but looking at the source for most websites, that's not the format. Should I just be hard coding my strings into my html? – user3524785 Apr 11 '14 at 18:36

2 Answers2

8

Put the script after the elements in the DOM, otherwise the elements doesn't exist when you're trying to get them

<html>
    <head>
    </head>
    <body>
        <p id="fullname"></p>
        <script type="text/javascript" src="script.js"></script>
    </body>
</html>

Another (not as good) option is waiting for onload

window.onload = function() {
    var fullname = "example";
    document.getElementById('fullname').innerHTML = fullname;
}

or in modern browsers

document.addEventListener("DOMContentLoaded", function(event) {
    var fullname = "example";
    document.getElementById('fullname').innerHTML = fullname;
});
adeneo
  • 312,895
  • 29
  • 395
  • 388
  • Wow... thank you! can you give me a quick explanation on why it should be after? I always thought the linking and script referencing should be in the head – user3524785 Apr 11 '14 at 18:01
  • Because the script is trying to get elements in the DOM, but scripts and other elements are parsed and executed in the order they appear, and when the script comes before the element you're trying to get with getElementById, that element hasn't been parsed yet, so it doesn't exist. – adeneo Apr 11 '14 at 18:03
2

When the script executes the #fullname element does not yet exist in the DOM. You need to either defer execution of the script, or reorganize the HTML so that the script is called after the #fullname element is created.

Deferrred example using [defer] attribute

<html>
 <head>
    <script type="text/javascript" src="script.js" defer></script>
    <!--                                           ^^^^^       -->
 </head>
 <body>
    <p id="fullname"></p>
 </body>
</html>

Reorganize example

<html>
 <head>
 </head>
 <body>
    <p id="fullname"></p>
    <script type="text/javascript" src="script.js"></script>
 </body>
</html>

Defer using callback (jQuery used for convenience)

HTML: 
<html>
 <head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="script.js"></script>
 </head>
 <body>
    <p id="fullname"></p>
 </body>
</html>
script.js: 
jQuery(function ($) {
    var fullname = "example";
    $('#fullname').html(fullname);
});

Defer using callback (no libraries)

HTML: 
<html>
 <head>
    <script src="script.js"></script>
 </head>
 <body>
    <p id="fullname"></p>
 </body>
</html>
script.js: 
window.addEventListener('load', function () {
    var fullname = "example";
    document.getElementById('fullname').innerHTML = fullname;
}, false);
zzzzBov
  • 174,988
  • 54
  • 320
  • 367