Question

所以我试图创建一个随机生成器，显示许多隐藏图像中的一个+许多隐藏DIV中的一个。

对于图像，它正常工作，因为它们是页面上唯一的图像，但是一旦我尝试在另一个div标签内选择某些div标签，我就会收到错误：

“未捕获的TypeError：无法读取未定义的属性'样式”

我在<div id="text">中有9个div。这是我的javascript代码，我正在尝试运行：

function randomString() {

    var chars = "123456789";
    var string_length = 1;
    var randomstring = '';
    var x = document.getElementById("text").getElementsByTagName("div");

    for (var i=0; i<string_length; i++) {
        var rnum = Math.floor(Math.random() * chars.length);
        randomstring += chars.substring(rnum,rnum+1);
    }

    for(var j=0; j<8 ;j++) {

        document.getElementsByTagName("img")[j].style.opacity="0";
        document.getElementById("text").getElementsByTagName("div")[j].style.display="none";
    }

    switch (randomstring*1) {

        case 1: document.getElementsByTagName("img")[0].style.opacity="1";
                x[0].style.display="block"; break;
        case 2: document.getElementsByTagName("img")[1].style.opacity="1";
                x[1].style.display="block"; break;
        case 3: document.getElementsByTagName("img")[2].style.opacity="1";
                x[2].style.display="block"; break;
        case 4: document.getElementsByTagName("img")[3].style.opacity="1";
                x[3].style.display="block"; break;
        case 5: document.getElementsByTagName("img")[4].style.opacity="1";
                x[4].style.display="block"; break;
        case 6: document.getElementsByTagName("img")[5].style.opacity="1";
                x[5].style.display="block"; break;
        case 7: document.getElementsByTagName("img")[6].style.opacity="1";
                x[6].style.display="block"; break;
        case 8: document.getElementsByTagName("img")[7].style.opacity="1";
                x[7].style.display="block"; break;
        case 9: document.getElementsByTagName("img")[8].style.opacity="1";
                x[8].style.display="block"; break;
    }

    document.randform.randomfield.value = randomstring;

}

这就是我在HTML中所拥有的：

 <DOCTYPE html>
<html>
<head>
<title>MTB Tricks Randomiser</title>
<link rel="stylesheet" type="text/css" href="randomizer.css" />
<script language="javascript" type="text/javascript" src="randomizer.js"></script>
</head>
<body>
    <header>
        <h3>Click the button to find out what your trick for today is!
            <br> (If you dare...)
        </h3>
    </header>
    <form name="randform">
        <input type="button" value="Create Random String" onClick="randomString();">&nbsp;
        <input type="text" name="randomfield" value="">
    </form>
    <div id="container">
        <div id="images">
            <img src="images/a.jpg" id="firstimage"/>
            <img src="images/b.jpg" id="secondimage" />
            <img src="images/c.jpg" id="thirdimage"/>
            <img src="images/d.jpg" id="fourthimage"/>
            <img src="images/e.jpg" id="fifthimage"/>
            <img src="images/f.jpg" id="sixthimage"/>
        </div>
        <div id="text">
            <div id="textone">
                    a
            </div>
            <div id="texttwo">
                    b
            </div>
            <div id="textthree">
                    c
            </div>
            <div id="textfour">
                    d
            </div>
            <div id="textfive">
                    e
            </div>
            <div id="textsix">
                    f
            </div>
            <div></div>
            <div></div>
            <div></div>
        </div>
    </div>
</body>
</html>

Answer 1

在案例7 - 9的switch语句中看起来会出错，因为HTML中只有6个图像。如同，document.getElementsByTagName("img")[8].style.opacity="1";之类的行会失败。

getElementById + getElementsByTagName在javascript控制台中给出了Type错误

1 个答案: