JS Co не работает

Я хотел бы знать, почему мой код не work.I'm просто пытаюсь изменить атрибут высоты от «1000» до «2» Вот код:JS Co не работает

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>Title of the document</title> 
</head> 
<body> 
<canvas id="canv" width="1000" height="1000" onclick="click()" onmousemove=""></canvas> 
<script type="text/javascript"> 
function click(){ 
    var l = document.getElementById("canv"); 
    l.height = "2"; 

} 
</script> 
</body> 
</html>

источник

2016-09-20 Andrea Di Mauro

Вы вызвали ваш обработчик click. onxyz Обработчики атрибутов стиля выполняются в среде, в которой сам элемент смешен в область видимости, поэтому в вашем обработчике click ссылается на click на самом холсте, а не на глобальную функцию. Таким образом, ваша глобальная функция не вызывается.

Если вы используете другое имя, вы не имеете конфликта, а глобальная функция называется:

function clickCanvas(){ 
 
    console.log("Got here"); 
 
    var l = document.getElementById("canv"); 
 
    l.height = "2"; 
 
}

<canvas id="canv" width="1000" height="1000" onclick="clickCanvas()" onmousemove=""></canvas>

я настоятельно рекомендую не использовать onxyz атрибута по хотя и не в последнюю очередь потому, что они полагаются на глобальные функции, а глобальные переменные - это Bad Thing ™. Вместо этого подключите обработчик с помощью современной обработки событий, которая, помимо хорошей игры с другими, не имела бы проблем с конфликтом имен, которые у вас были. Она также позволяет использовать this в обработчике, чтобы обратиться к элементу, на котором вы подключили событие:

document.getElementById("canv").addEventListener("click", function() { 
 
    console.log("Got here"); 
 
    this.height = "2"; 
 
}, false);

<canvas id="canv" width="1000" height="1000"></canvas>

источник

2016-09-20 11:04:53

Ive было делать JS на протяжении многих лет, и ни разу я взял, что вы не можете назвать функцию той же самой, что и событие при использовании разметки onxyz. Мне пришлось дважды проверить это с помощью jsfiddle, чтобы поверить в это! – Jamiec

@Jamiec: Доверяйте своему дяде T.J ... ;-) * (Доверьтесь ... но проверьте.) * –

ответ

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