Write random string into an element inline with text

Question

I'm trying to write text chosen from a set of random strings inline with text in the html body. Here is my code so far:

Javascript

var textArray = [
    'STRING 1',
    'STRING 2',
    'STRING 3',
    'STRING 4',
    'STRING 5',
    'STRING 6'];
var randomNumber = Math.floor(Math.random() * textArray.length);
document.getElementById('output').innerHTML = (textArray[randomNumber]);

HTML

<body>
TEXT <span id="output"></span> TEXT
</body>

It works in JSFiddle, but I get an error in browser "Uncaught TypeError: Cannot set property 'innerHTML' of null." What's wrong with this? Also, is there a more efficient way of doing this? Here is the JSFiddle.

Check if DOM is already loaded and if you have any typo in the id — Igl3
– Igl3, Commented May 28, 2014 at 14:35

codebox · Accepted Answer · 2014-05-28 14:35:14Z

2

It sounds like the JavaScript code is running before the DOM has been fully loaded, so there is no element with id output available.

Try running your JS code from inside the document.onload handler and it should work.

answered May 28, 2014 at 14:35

codebox

20.3k10 gold badges70 silver badges81 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

mxrclxst Over a year ago

You're absolutely right! I missed the "onLoad" setting in JSFiddle. When I set it to "No Wrap - in <head>" the code breaks. Now, I'm not sure how to use the document.onload in conjunction with my current code. I'm very new to JS. What's the right syntax?

ndugger Over a year ago

I wouldn't use onload, personally. Try putting your <script>'s at the very end of the body tag instead.

Niezborala · Accepted Answer · 2014-05-28 14:40:35Z

0

You must add ready state and include jQuery.

$(function(){
   /*code here...*/
}

Try this

answered May 28, 2014 at 14:40

Niezborala

1,8571 gold badge19 silver badges27 bronze badges

Collectives™ on Stack Overflow

Write random string into an element inline with text

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related