2013-11-22 1 views
0

Так что я пытаюсь создать случайный генератор, который показывает одно из многих скрытых изображений + один из многих скрытых DIV.getElementById + getElementsByTagName дает ошибку типа в javascript-консоли

Для изображений она работает хорошо, поскольку они являются единственными на странице, но как только я пытаюсь отобранными определенными Div тегов внутри другого сНу тега я получаю ошибку:

«неперехваченный TypeError: Может не read property 'style' of undefined "

У меня есть 9 divs в <div id="text">. Это мой 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> 
+2

Показать свой HTML. – Satpal

+0

У вас есть 8 тегов div в вашем html? – argo49

+0

Я пытаюсь сделать это без getElementById ("textone"), затем texttwo ... поскольку он будет слишком длинным и непрофессиональным. Извините, если что-то выглядит довольно плохо написанным, я посещаю курсы только на три месяца. – user3023071

ответ

1

Это выглядит, как она будет без ошибок в switch заявлении для случаев 7 - 9, потому что в HTML есть только 6 изображений. Как и в случае, строка, подобная document.getElementsByTagName("img")[8].style.opacity="1";, потерпит неудачу.

+0

Спасибо, это тоже + ответ ниже, который был прав, я не знаю, почему это не понравилось. Все отлично работают, спасибо всем! Этот сайт помог мне так далеко ... лучшее сообщество! :) – user3023071

+0

Они не отображаются из-за '.style.display =" none ";' вы должны изменить это на любой стиль, который вы хотите для своих возвращенных div. Разочарование, когда люди вниз без объяснений. –

+0

Пожалуйста, отметьте это как правильно, если ответ сработал для вас. :) – manafire