2017-02-03 8 views
1

Функция, которую я определяю внутри события onclick, не работает.Функция внутри события onclick не работает

Я не знаю, чего у меня нет. Также я должен упомянуть, что я уже проверил, правильно ли связан JavaScript с HTML, и это так.

https://jsfiddle.net/5sg4owpu/7/

HTML:

<!DOCTYPE html> 
<html lang="en"> 

    <head> 
    <meta charset="utf-8"> 
    <title> Practice 1</title> 
    <link href="indexStyle.css" rel="stylesheet" type="text/css"> 
    </head> 

    <body> 
    <p class="hello">Hello There!</p> 

    <script src="newjavascript.js"></script> 

    </body> 
</html> 

CSS:

.hello { 
    border: 1px solid black; 
    width: 100px; 
    background: blue; 
} 

JavaScript:

var mm = document.getElementsByClassName("hello"); 
mm.onclick=function() { 
    alert("It worked!"); 
}; 
+0

Возможный дубликат [Что делать querySelectorAll, getElementsByClassName и другие getElementsBy \ * методы возврата?] (Http://stackoverflow.com/questions/10693845/what-do-queryselectorall-getelementsbyclassname-and-other-getelementsby -method) – Xufox

ответ

1

Это не работает, как ожидалось, так как метод getElementsByClassName возвращает набор элементов. Это означает, что вам нужно будет получить доступ к определенному элементу внутри этой коллекции, чтобы добавить прослушиватель событий. Вы пытались добавить слушателя событий во всю коллекцию, которая явно не работала.

Например, можно добавить слушатель события к первому элементу в коллекции:

Updated Example

var m1 = document.getElementsByClassName("hello"); 

m1[0].onclick = function() { 
    alert("It worked!"); 
}; 

Однако, было бы лучше всего использовать такой метод, как document.querySelector для того, чтобы выберите нужный элемент. В этом случае метод querySelector возвращает только один элемент.

Updated Example

var m1 = document.querySelector(".hello"); 

m1.addEventListener('click', function() { 
    alert("It worked!"); 
}); 

Вы также можете проверить, чтобы убедиться, что элемент существует до применения слушателя событий, в противном случае будет сгенерировано исключение:

var m1 = document.querySelector(".hello"); 

if (m1) { 
    m1.addEventListener('click', function() { 
    alert("It worked!"); 
    }); 
} 
1

document.getElementsByClassName() возвращает массив, вы необходимо будет получить доступ к первому элементу массива, чтобы затем определить его функцию onclick:

var mm = document.getElementsByClassName("hello")[0]; 
mm.onclick = function() { 
    alert("It worked!"); 
}; 
0

getElementsByClassName возвращает массив и массив не имеет функции onclick. Вам нужно получить доступ к элементу и установить обратный вызов функции на нем.

var mm=document.getElementsByClassName("hello"); 
mm[0].onclick=function(){ 
    alert("It worked!"); 
}; 
+0

Он не возвращает массив. Он возвращает 'HTMLCollection'. – Xufox

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