问题描述:

So I am trying to create a random generator that shows one out of many hidden images + one out of many hidden DIVs.

For the images it is working alright as they are the only ones on the page, but as soon as I try to selected certain div tags inside another div tag I get the error:

"Uncaught TypeError: Cannot read property 'style' of undefined "

I have 9 divs in a <div id="text">. This is my javascript code, that I am trying to run :

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;

}

And this is what I have in the 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>

网友答案:

It looks like it would error out in the switch statement for cases 7 - 9 because there are only 6 images in the HTML. As in, a line like document.getElementsByTagName("img")[8].style.opacity="1"; would fail.

相关阅读:
Top