javascript - JavaScript和document.getElementById - Thinbug

JavaScript和document.getElementById

时间：2013-01-24 04:11:21

标签： javascript html

我是JS的新手。我把document.getElementById放在我的JS中并尝试将该元素放入p id，但是当我点击按钮时，什么都没有显示出来。我在这做错了什么？任何帮助是极大的赞赏。谢谢！

<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>

2 个答案:

答案 0 :(得分：3)

使用第一个功能

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 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() {
    // 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");
}

功能名称中有拼写错误意味着您所呼叫的名称与定义名称不同。
document.getElementById("troll").innerHTML = trackToUse ; 添加此项以随机查看所选选项。

以下是经过修复的帮助代码

<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>

答案 1 :(得分：2)

如果您想更改元素的值，则需要在检索元素后对其执行某些操作。

例如：

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";
}