JavaScript and document.getElementById

Question

I'm new to JS. I put document.getElementById in my JS and tried to put that element into a p id, but when I click the button, nothing is showing up. What am I doing wrong here? Any help is greatly appreciated. Thank you!

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>GRL Example</title>
<script>
function class_roll() {
    // Car Classes
    var classes = ["B", "A", "S", "R3", "R2", "R1"],
        classToUse = classes[Math.floor(Math.random() * classes.length)];
    var elemClass = document.getElementById("croll");
}

function track_roll() {
    // Tracks
    var tracks = ["Clear Springs Circuit", "Festival North Circuit", "Beaumont Circuit", "Finley Dam Circuit", "Gladstone Circuit", "Clifton Valley Trail", "Gladstone Trail"],
        trackToUse = tracks[Math.floor(Math.random() * tracks.length)];
    var elemTrack = document.getElementById("troll");
}
</script>
</head>

<body>

<p id="croll">Some text here</p>
    <button onclick="class_roll();">Class Roll</button>

<p id="troll">Some text here</p>
    <button onclick="track_troll;">Track Roll</button>

</body>
</html>

Answer 1

With First function

function class_roll() {
    // Car Classes
    var classes = ["B", "A", "S", "R3", "R2", "R1"],
        classToUse = classes[Math.floor(Math.random() * classes.length)];
    var elemClass = document.getElementById("croll");
}

You are not performing any action therefore add some action which visible to you. Change it to.

function class_roll() {
    // Car Classes
    var classes = ["B", "A", "S", "R3", "R2", "R1"],
        classToUse = classes[Math.floor(Math.random() * classes.length)];
    document.getElementById("croll").innerHTML = classToUse ;
}

With Second Function

function track_roll() {
    // Tracks
    var tracks = ["Clear Springs Circuit", "Festival North Circuit", "Beaumont Circuit", "Finley Dam Circuit", "Gladstone Circuit", "Clifton Valley Trail", "Gladstone Trail"],
        trackToUse = tracks[Math.floor(Math.random() * tracks.length)];
    var elemTrack = document.getElementById("troll");
}

There is typo mistake in function name means name what you calling is different from definition name.
document.getElementById("troll").innerHTML = trackToUse ; add this to see the selected option randomly.

Here is repaired code for your assistance

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>GRL Example</title>

</head>

<body>

<p id="croll">Some text here</p>
    <button onclick="class_roll();">Class Roll</button>

<p id="troll">Some text here</p>
    <button onclick="track_roll();">Track Roll</button>

</body>
<script>
function class_roll() {
    // Car Classes
    var classes = ["B", "A", "S", "R3", "R2", "R1"],
        classToUse = classes[Math.floor(Math.random() * classes.length)];
    document.getElementById("croll").innerHTML = classToUse ;
}

function track_roll() {

    var tracks = ['a' ,'a' ,'a' ,'a'];
        trackToUse = tracks[Math.floor(Math.random() * tracks.length)];
    document.getElementById("troll").innerHTML = trackToUse ;

}
</script>
</html>

Answer 2

If you'd like to change the value of your element, you'll need to do something with it after you've retrieved it.

For example:

function track_roll() {
    // Tracks
    var tracks = ["Clear Springs Circuit", "Festival North Circuit", "Beaumont Circuit", "Finley Dam Circuit", "Gladstone Circuit", "Clifton Valley Trail", "Gladstone Trail"],
        trackToUse = tracks[Math.floor(Math.random() * tracks.length)];
    var elemTrack = document.getElementById("troll");
    elemTrack.InnerHTML = "Test";
}

JavaScript and document.getElementById

Question

2 answers

solution1
3 ACCPTED 2013-01-24 04:42:01

With First function

With Second Function

solution2
2 2013-01-24 04:19:38

JavaScript and document.getElementById

Question

2 answers

solution1 3 ACCPTED 2013-01-24 04:42:01

With First function

With Second Function

solution2 2 2013-01-24 04:19:38

solution1
3 ACCPTED 2013-01-24 04:42:01

solution2
2 2013-01-24 04:19:38