Website with 3 randomly picked statements from list

kicks66 · 8 Apr 2013 at 14:36

Im trying to create a website for my company. We'd like to have a site which we display 3 statements from a list of around 20. How would I go about doing this?

GravyMonster · 8 Apr 2013 at 14:41

How are you storing your 20 statements? What language do you want to use to retrieve them?

kicks66 · 8 Apr 2013 at 14:47

Spunkey said:
How are you storing your 20 statements? What language do you want to use to retrieve them?

Im quite new to this so the easiest way would be best, im not sure what this is? I thought it would be possible to store them in the code and only display 3 of them randomly on the page?

GravyMonster · 8 Apr 2013 at 15:27

If you want to store them in code and display them then JavaScript would probably be the quickest/easiest way:

Code:

var statements = [
    'Statement 1',
    'Statement 2',
    'Statement 3',
    'Statement 4',
    'Statement 5',
    'Statement n',
];

function getRandomStatement() {
    return statements[Math.floor(Math.random() * statements.length)];
}

document.getElementById('foo').innerText = getRandomStatement();

kicks66 · 8 Apr 2013 at 15:55

So I tried to implement that:

Code:

<html>
<head>
<title>test</title>
<script type="text/javascript">

var statements = [
	'test1',
	'test2',
	'test3',
];

function getRandomStatement() {
	return statements[Math.floor(Math.random() * statements.length)];
}

document.getElementByID('foo').innerText = getRandomStatement();

</script>
<body bgcolor="#FFFF00">
<h1 style="text-align: center;">
<span style="color:#000000;">
<span style="font-family: 'lucida sans unicode', 'lucida grande', sans-serif;">
<span style="font-size: 36px;">
<span style="line-height: 16px;">
<span style="background-color:#ffff00;">
<div id="foo"></div>
</span>
</span>
</span>
</span>
</span>
</h1>
</body>
</html>

But it doesnt display anything on my site. I think I must be being a total noob here.

GravyMonster · 8 Apr 2013 at 16:07

Sorry my fault, it should be 'getElementById' - note the lowercase 'd'

kicks66 · 8 Apr 2013 at 16:09

Spunkey said:
Sorry my fault, it should be 'getElementById' - note the lowercase 'd'

It still doesn't seem to be working for me.

doiks14 · 8 Apr 2013 at 18:01

http://jsfiddle.net/z9tF6/

Seems to work fine for me

edit: make sure you attach them to window onLoad or document ready events
https://developer.mozilla.org/en-US...slug=Mozilla_event_reference/readystatechange - see here for reference

or how jsfiddle auto attaches it to onload event

Code:

//<![CDATA[ 
window.onload=function(){
var statements = [
	'test1',
	'test2',
	'test3',
];

function getRandomStatement() {
	return statements[Math.floor(Math.random() * statements.length)];
}

document.getElementById('foo').innerText = getRandomStatement();
}//]]>

The main difference between the ready and onload events are that the ready event is triggered when the DOM is ready for manipulation where as onload waits for everything to be loaded inc. images and other external things embedded on the page. Different browsers may do them slightly differently however.