Random Text on Refresh

Question

I am trying to get a simple text change on refresh:

<strong>Title</strong>
<p id="myQuote">Slogan</p>

And the "Slogan" part changes on refresh:

var myQuotes = new Array();
myQuotes[0] = "To be or not to be";
myQuotes[1] = "The only thing we have to fear is fear itself";
myQuotes[2] = "Give me liberty or give me death";

var myRandom = Math.floor(Math.random()*myQuotes.length);

$('#myQuote').html(myQuotes[myRandom]);

Did you ensure jQuery is imported and your code is called in a dom ready callback ? Do you have an error ? — Denys Séguret, Dec 10 '12 at 18:26
You can't select DOM elements until the DOM is loaded; wrap your `$('#myQuote').html(myQuotes[myRandom]);` inside a `$(document).ready(function() { ... })`. — apsillers, Dec 10 '12 at 18:28
I addded jQuery to my site and it all works... I feel dumb xD Thanks! — ryantpayton, Dec 10 '12 at 18:36

score 1 · Answer 1 · edited May 23 '17 at 12:21

1

You can't select or manipulate DOM elements until the DOM is loaded.

Wrap your $('#myQuote').html call inside a $(document).ready(function() { ... }), as demonstated in this fiddle.

Alternatively, put your <script> tag at the bottom of your <body> so it loads after the rest of the DOM. (See further discussion of your load-time options in Unobtrusive JavaScript: <script> at the top or the bottom of the HTML code?.)

edited May 23 '17 at 12:21

Community

1
1

answered Dec 10 '12 at 18:29

apsillers

112,806
17
235
239

1

Actually you can: http://jsfiddle.net/Hn6fL/2/ you just need to run the code after the specific elements you're targeting are loaded. – Christophe Dec 10 '12 at 18:39
Did you edit my fiddle or make your own with my code? The load-time drop down must be set to `no wrap (head)` or else it gets wrapped anyway by jsfiddle. Here is a non-working fiddle: http://jsfiddle.net/T3htp/ – apsillers Dec 10 '12 at 18:40
Are you saying that the code gets wrapped even if you select no wrap (body)? – Christophe Dec 10 '12 at 18:44
Nope! In that case it gets placed at the bottom of the ``, as you suggested in your alternative (which I've added to my answer). I only said "or else it gets wrapped" since that's the jsfiddle default; the no-wrap-body option also does not wrap (as the name suggests). – apsillers Dec 10 '12 at 19:18

KingKongFrog · Accepted Answer · 2012-12-10T18:45:05.487

0

My guess is jQuery is not loaded....

if (jQuery) {  
    alert('jQuery is loaded'); 
} else {
    alert('not loaded');
}

Then check if you are getting a value from the random function.

var myRandom = Math.floor(Math.random()*myQuotes.length);

alert(myQuotes[myRandom]); //Add this to your code

$('#myQuote').html(myQuotes[myRandom]);

edited Dec 10 '12 at 18:45

answered Dec 10 '12 at 18:31

KingKongFrog

13,946
21
75
124

KingKongFrog · Answer 3 · 2012-12-10T18:45:26.860

0

Replace the following to avoid using jQuery in your script

http://jsfiddle.net/TYEGh/

$('#myQuote').html(myQuotes[myRandom]);

with

document.getElementById('myQuote').innerHTML= myQuotes[myRandom];

edited Dec 10 '12 at 18:45

answered Dec 10 '12 at 18:36

KingKongFrog

13,946
21
75
124

Random Text on Refresh

3 Answers3