2014-01-10 2 views
0

В следующем коде мне нужно написать функцию удаления элемента класса (devil), я написал функцию для удаления, но что-то не так. Спасибо за ваше время!Ошибка при попытке удалить элемент

HTML код

<html> 
    <title>Test</title> 
    <head> 
     <link rel="stylesheet" type="text/css" href="style.css"> 
     <script type="text/javascript" src="javascript.js"></script> 
    </head> 
    <body onload="draw()" onclick="shoot(event)"> 
      <div id="box" onmousemove="move(event)"> 
       <img id="aim"src="img/1.png" alt=""> 
      </div> 
      <div id="borderleft"></div> 
      <div id="info">  
      </div> 

    </body> 
</html> 

CSS код

body{ 
    margin: 0px; 
} 
img{ 
    position: absolute; 
} 

#box{ 
    background-color: #c0c0c0; 
    width: 500px; 
    height: 500px; 
    cursor: none; 
    z-index: 2; 

} 
#info{ 
    width: 524px; 
    height: 30px; 
    border: 1px; 
    background-color: gray; 
    position: absolute; 
} 

#borderleft{ 
    top:-25px; 
    height: 525px; 
    width: 25px; 
    margin-left: 499px; 
    background-color: gray; 
    position: absolute; 
} 

#info, #border{ 

    z-index: 3; 
} 


.devil{ 
    z-index: 1; 

} 

и JavaScript-код

function move(e){ 
    if(e.clientX<500 && e.clientY<500){ 
    // alert(e.clientX+":"+e.clientY) 
    //cautam divul info 
    info=document.getElementById("info") 

    //schimbam textul din terior 
    //innerHTML- 
    info.innerHTML=e.clientX+":"+e.clientY 

    //miscam imaginea cu mouse 
    //gasim imaginea dupa id 
    aim=document.getElementById("aim"); 
    aim.style.left=(e.clientX-25)+"px"; 
    aim.style.top=(e.clientY-25)+"px"; 
    } 
    //animatia se face mai bine in pozitia absolute 
    //la absolute update se face doar la absolut div da la relative la toata pagina 

} 

//functia care va desena imagini 
function draw(){ 
// generam cantitate de obiecte 
N_objects=parseInt(Math.random()*10); 

// ciclu-adaugam imaginile in boxa 
    //gasim box 
    box=document.getElementById("box"); 

    for(i=0;i<N_objects;i++){ 
    //cream elemente noi 
    o=document.createElement('img'); 
    //setam adresa 
    o.src="img/2.png"; 
    //adaugam element in box 
    box.appendChild(o); 

      o.setAttribute("class","devil") 
    //coordonate aleatoare 
    o.style.left=parseInt(Math.random()*449)+'px'; 
    o.style.top=parseInt(Math.random()*449)+'px'; 
    } 



} 

function shoot(e){ 
// alert(e.clientX+":"+e.clientY) 
devil=document.querySelectorAll('.devil') 
//verificam daca am nimerit in toate imaginile 
for(i=0;i<devil.length;i++) 
{ 
    if (e.clientX>parseInt(devil[i].style.left)) 
    if(e.clientY>parseInt(devil[i].style.top)) 
     if(e.clientX<parseInt(devil[i].style.left)+50) 
     if(e.clientY<parseInt(devil[i].style.top)+50) 
     { 
      element=getElementByClass("devil"); 
      element.parentNode.removeChild(element) 
     }; 
} 

}

В функции shoot, внутри операторов if мне нужна функция, которая удаляет элемент с классом (devil), я написал эти строки, но у меня есть ошибка.

element=getElementByClass("devil"); 
element.parentNode.removeChild(element) 
+2

Почему вы не объявляете какие-либо переменные? Опасные! – elclanrs

+2

Какое сообщение об ошибке? – reporter

+0

Я новичок в JavaScript, поэтому у меня нет переменных, и в этом коде я не вижу, нужны ли мне переменные. Ошибка: Uncaught ReferenceError: getElementByClass не определен – Chris

ответ

0

Значит, у вас есть способ getElementByClass?

В JavaScript нет getElementByClass, есть document.getElementsByClassName, который возвращает коллекцию.

var element = document.getElementsByClassName("devil")[0]; 
element.parentNode.removeChild(element) 
+0

THx, ваша строка кода работает, но можете ли вы рассказать мне, какая доза [0] означает? – Chris

+0

'getElementsByClassname' возвращает набор элементов. Обозначение скобки [0] возвращает первый элемент из набора. – epascarello

+0

ой, но как я могу вернуть элемент в моем случае, на который я нажимаю? – Chris

0

идентификаторы ограничены быть уникальным в HTML (некоторые веб-дизайнеры, кажется, не так думать. Если вы найдете один из них, пробивать их). Классы не являются - и поэтому любой метод нахождения определенного класса имеет тенденцию возвращать набор из них.

Если вы ожидаете наличия только одного из определенных элементов HTML, установите его id вместо его класса и получите его с помощью getElementById().

И наоборот, если вы ожидаете, что у вас есть несколько элементов определенного типа (например, «borderBox» или «gameEnemy»), используйте класс и итерации по результатам getElementsByClassName с использованием цикла for, который, вероятно, выполняет ту же операцию на каждом из них. (Если вы не знакомы с циклами, вы можете действительно захотеть пройти курс по основам JavaScript)

Смежные вопросы