addEventListener() method not called when accessed by array
The code below reads the unicode value of the key that was pressed down by the user and then prints it out on the screen. It works like intended:
document.addEventListener("keydown", getKey);
document.addEventListener("keyup", displayKey);
function getKey() {
var key = event.which || event.keyCode;
return key;
}
function displayKey() {
document.body.innerHTML = "Unicode value: " + getKey();
}
However, when I try to do the same thing with a class it doesn't work:
<div class="anyName">Press any key</div>
<script>
var n = document.getElementsByClassName("anyName");
n[0].addEventListener("keydown", getKey);
n[0].addEventListener("keyup", displayKey);
function getKey() {
var key = event.which || event.keyCode;
return key;
}
function displayKey() {
n[0].innerHTML = "Unicode value: " + getKey();
}
</script>
Why does it not work and how can I fix it? Any help is greatly appreciated!
javascript web
asked Nov 14 '18 at 16:11
samsam
1
add a comment |
The code below reads the unicode value of the key that was pressed down by the user and then prints it out on the screen. It works like intended:
document.addEventListener("keydown", getKey);
document.addEventListener("keyup", displayKey);
function getKey() {
var key = event.which || event.keyCode;
return key;
}
function displayKey() {
document.body.innerHTML = "Unicode value: " + getKey();
}
However, when I try to do the same thing with a class it doesn't work:
<div class="anyName">Press any key</div>
<script>
var n = document.getElementsByClassName("anyName");
n[0].addEventListener("keydown", getKey);
n[0].addEventListener("keyup", displayKey);
function getKey() {
var key = event.which || event.keyCode;
return key;
}
function displayKey() {
n[0].innerHTML = "Unicode value: " + getKey();
}
</script>
Why does it not work and how can I fix it? Any help is greatly appreciated!
javascript web
asked Nov 14 '18 at 16:11
samsam
1
Unless it iscontenteditablethere wouldn't be any focus on a<div>
– charlietfl
Nov 14 '18 at 16:15
add a comment |
The code below reads the unicode value of the key that was pressed down by the user and then prints it out on the screen. It works like intended:
document.addEventListener("keydown", getKey);
document.addEventListener("keyup", displayKey);
function getKey() {
var key = event.which || event.keyCode;
return key;
}
function displayKey() {
document.body.innerHTML = "Unicode value: " + getKey();
}
However, when I try to do the same thing with a class it doesn't work:
<div class="anyName">Press any key</div>
<script>
var n = document.getElementsByClassName("anyName");
n[0].addEventListener("keydown", getKey);
n[0].addEventListener("keyup", displayKey);
function getKey() {
var key = event.which || event.keyCode;
return key;
}
function displayKey() {
n[0].innerHTML = "Unicode value: " + getKey();
}
</script>
Why does it not work and how can I fix it? Any help is greatly appreciated!
javascript web
asked Nov 14 '18 at 16:11
samsam
1
The code below reads the unicode value of the key that was pressed down by the user and then prints it out on the screen. It works like intended:
document.addEventListener("keydown", getKey);
document.addEventListener("keyup", displayKey);
function getKey() {
var key = event.which || event.keyCode;
return key;
}
function displayKey() {
document.body.innerHTML = "Unicode value: " + getKey();
}
However, when I try to do the same thing with a class it doesn't work:
<div class="anyName">Press any key</div>
<script>
var n = document.getElementsByClassName("anyName");
n[0].addEventListener("keydown", getKey);
n[0].addEventListener("keyup", displayKey);
function getKey() {
var key = event.which || event.keyCode;
return key;
}
function displayKey() {
n[0].innerHTML = "Unicode value: " + getKey();
}
</script>
Why does it not work and how can I fix it? Any help is greatly appreciated!
javascript web
javascript web
asked Nov 14 '18 at 16:11
samsam
1
asked Nov 14 '18 at 16:11
samsam
1
asked Nov 14 '18 at 16:11
samsam
1
asked Nov 14 '18 at 16:11
samsam
1
asked Nov 14 '18 at 16:11
samsam
1
1
Unless it iscontenteditablethere wouldn't be any focus on a<div>
– charlietfl
Nov 14 '18 at 16:15
add a comment |
Unless it iscontenteditablethere wouldn't be any focus on a<div>
– charlietfl
Nov 14 '18 at 16:15
Unless it is
contenteditable there wouldn't be any focus on a <div>– charlietfl
Nov 14 '18 at 16:15
Unless it is
contenteditable there wouldn't be any focus on a <div>– charlietfl
Nov 14 '18 at 16:15
add a comment |
1 Answer
1
active
oldest
votes
This has nothing to do with arrays. getElementsByClassName returns a NodeList, not an array. It has nothing to do with NodeLists either.
The problem here is that you are trying to bind the event handler to a div.
Unless you engage in shenanigans (with accessibility implications), you cannot give focus to a div. The div doesn't have any descendants that can receive focus either. Consequently, when the event from the key event bubbles, it never touches the div, so it doesn't fire the event handler.
Put something you can give the focus to inside the div, click on it, then press a key, and it will work.
var n = document.getElementsByClassName("anyName");
n[0].addEventListener("keydown", getKey);
n[0].addEventListener("keyup", displayKey);
function getKey() {
var key = event.which || event.keyCode;
return key;
}
function displayKey() {
n[0].innerHTML = "Unicode value: " + getKey();
}<div class="anyName"><textarea></textarea></div>Warning: You are using the global event object which is non-standard and not supported by Firefox. Use the first argument passed to the event handler to get the event object instead.
answered Nov 14 '18 at 16:15
QuentinQuentin
648k728781043
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53304440%2faddeventlistener-method-not-called-when-accessed-by-array%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
This has nothing to do with arrays. getElementsByClassName returns a NodeList, not an array. It has nothing to do with NodeLists either.
The problem here is that you are trying to bind the event handler to a div.
Unless you engage in shenanigans (with accessibility implications), you cannot give focus to a div. The div doesn't have any descendants that can receive focus either. Consequently, when the event from the key event bubbles, it never touches the div, so it doesn't fire the event handler.
Put something you can give the focus to inside the div, click on it, then press a key, and it will work.
var n = document.getElementsByClassName("anyName");
n[0].addEventListener("keydown", getKey);
n[0].addEventListener("keyup", displayKey);
function getKey() {
var key = event.which || event.keyCode;
return key;
}
function displayKey() {
n[0].innerHTML = "Unicode value: " + getKey();
}<div class="anyName"><textarea></textarea></div>Warning: You are using the global event object which is non-standard and not supported by Firefox. Use the first argument passed to the event handler to get the event object instead.
answered Nov 14 '18 at 16:15
QuentinQuentin
648k728781043
add a comment |
This has nothing to do with arrays. getElementsByClassName returns a NodeList, not an array. It has nothing to do with NodeLists either.
The problem here is that you are trying to bind the event handler to a div.
Unless you engage in shenanigans (with accessibility implications), you cannot give focus to a div. The div doesn't have any descendants that can receive focus either. Consequently, when the event from the key event bubbles, it never touches the div, so it doesn't fire the event handler.
Put something you can give the focus to inside the div, click on it, then press a key, and it will work.
var n = document.getElementsByClassName("anyName");
n[0].addEventListener("keydown", getKey);
n[0].addEventListener("keyup", displayKey);
function getKey() {
var key = event.which || event.keyCode;
return key;
}
function displayKey() {
n[0].innerHTML = "Unicode value: " + getKey();
}<div class="anyName"><textarea></textarea></div>Warning: You are using the global event object which is non-standard and not supported by Firefox. Use the first argument passed to the event handler to get the event object instead.
answered Nov 14 '18 at 16:15
QuentinQuentin
648k728781043
add a comment |
This has nothing to do with arrays. getElementsByClassName returns a NodeList, not an array. It has nothing to do with NodeLists either.
The problem here is that you are trying to bind the event handler to a div.
Unless you engage in shenanigans (with accessibility implications), you cannot give focus to a div. The div doesn't have any descendants that can receive focus either. Consequently, when the event from the key event bubbles, it never touches the div, so it doesn't fire the event handler.
Put something you can give the focus to inside the div, click on it, then press a key, and it will work.
var n = document.getElementsByClassName("anyName");
n[0].addEventListener("keydown", getKey);
n[0].addEventListener("keyup", displayKey);
function getKey() {
var key = event.which || event.keyCode;
return key;
}
function displayKey() {
n[0].innerHTML = "Unicode value: " + getKey();
}<div class="anyName"><textarea></textarea></div>Warning: You are using the global event object which is non-standard and not supported by Firefox. Use the first argument passed to the event handler to get the event object instead.
answered Nov 14 '18 at 16:15
QuentinQuentin
648k728781043
This has nothing to do with arrays. getElementsByClassName returns a NodeList, not an array. It has nothing to do with NodeLists either.
The problem here is that you are trying to bind the event handler to a div.
Unless you engage in shenanigans (with accessibility implications), you cannot give focus to a div. The div doesn't have any descendants that can receive focus either. Consequently, when the event from the key event bubbles, it never touches the div, so it doesn't fire the event handler.
Put something you can give the focus to inside the div, click on it, then press a key, and it will work.
var n = document.getElementsByClassName("anyName");
n[0].addEventListener("keydown", getKey);
n[0].addEventListener("keyup", displayKey);
function getKey() {
var key = event.which || event.keyCode;
return key;
}
function displayKey() {
n[0].innerHTML = "Unicode value: " + getKey();
}<div class="anyName"><textarea></textarea></div>Warning: You are using the global event object which is non-standard and not supported by Firefox. Use the first argument passed to the event handler to get the event object instead.
var n = document.getElementsByClassName("anyName");
n[0].addEventListener("keydown", getKey);
n[0].addEventListener("keyup", displayKey);
function getKey() {
var key = event.which || event.keyCode;
return key;
}
function displayKey() {
n[0].innerHTML = "Unicode value: " + getKey();
}<div class="anyName"><textarea></textarea></div>var n = document.getElementsByClassName("anyName");
n[0].addEventListener("keydown", getKey);
n[0].addEventListener("keyup", displayKey);
function getKey() {
var key = event.which || event.keyCode;
return key;
}
function displayKey() {
n[0].innerHTML = "Unicode value: " + getKey();
}<div class="anyName"><textarea></textarea></div>answered Nov 14 '18 at 16:15
QuentinQuentin
648k728781043
answered Nov 14 '18 at 16:15
QuentinQuentin
648k728781043
answered Nov 14 '18 at 16:15
QuentinQuentin
648k728781043
answered Nov 14 '18 at 16:15
QuentinQuentin
648k728781043
648k728781043
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53304440%2faddeventlistener-method-not-called-when-accessed-by-array%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Unless it is
contenteditablethere wouldn't be any focus on a<div>– charlietfl
Nov 14 '18 at 16:15