Why can't I add an event listener to the div?

Question

I have an object, which has a method that creates divs, then assigns them an on-click event, but I also want to assign them an onkeypress event, but it won't let me do it...

This is the method which creates divs. It works fine.

populateSquares(){
    let relatedTagToPopulation = document.getElementById("questionp");
    let whatTextIs = relatedTagToPopulation.textContent;
    for (let u=0;u<this.stemQuestions.length;u++){
        if (this.stemQuestions[u]==whatTextIs){
            var populateSquaresPertinentInt = u;
        }
    }
    for  (let i=0;i<this.stemAnswers.length;i++){
        if (i==populateSquaresPertinentInt){
            let numberOfSquaresToAdd = this.stemAnswers[i].length;
            for (let j=0;j<numberOfSquaresToAdd;j++){
                let elToAdd = document.createElement("div"); 
                elToAdd.id="ans"+j+"";
                elToAdd.className="lans";
                elToAdd.onclick= hangmanGame.selectThisSquare;
                console.log(elToAdd);
                let elToAddInto = document.getElementById("answeri"); 
                elToAddInto.appendChild(elToAdd); 
            }
        }
    }
},

This is the method that adds some properties to the div and also an event listener

selectThisSquare(e){
    let currentElementId = e.target.id;
    document.getElementById(currentElementId).style.cursor = "text";
    document.getElementById(currentElementId).style.backgroundColor = "#557a95";
    document.getElementById(currentElementId).onkeydown = hangmanGame.textInputHandler;
    console.log(e.target.id);
    let x = hangmanGame.giveCurrentQuestionAndWord();
    let xs = x[1];
    hangmanGame.deselectAllOtherSquares(currentElementId,xs);
},

This is the method that is supposed to trigger when the key is pressed, but nothing is triggered.

textInputHandler(){
    console.log(4);
},

I tried onkeypress and onkeydown, none of them work. I tried to call the function by adding this., it doesn't work anyway — OlegArsyonov, Feb 10 '19 at 08:18
Possible duplicate of [Capture key press (or keydown) event on DIV element](https://stackoverflow.com/questions/3149362/capture-key-press-or-keydown-event-on-div-element) — adiga, Feb 10 '19 at 08:18
I take it that the element you're adding the `onkeydown` event to is an input element of some sort, right? — Nick Parsons, Feb 10 '19 at 08:29
@OlegArsyonov Since you can't exactly "focus" on a div, when do you want the `onkeydown` event to fire — Nick Parsons, Feb 10 '19 at 08:34

Nick Parsons · Answer 1 · 2019-02-10T08:47:26.343

A div by default isn't "selectable" and thus it won't react to any keydown events. However, you can make it selectable by adding tabindex="0" to the div. This way it will become focusable when you click on it, which then allows the onkeydown event to trigger.

See working example below:

const game = {
  addKeyDownListener() {
    document.getElementById("txt").onkeydown = game.handleTextInput
  },
  handleTextInput() {
    console.log(4);
  }
}

game.addKeyDownListener();

#txt {
  height: 100px;
  width: 100px;
  border: 1px solid black;
  outline: none; /* add to hide outline */
}

<div type="text" id="txt" tabindex="0"></div>

Note: By default adding a tabindex will give your div a blue outline once selected. To remove this add the css outline: none.

This is correct but I'll note that for accessibility OP should rather use a to handle user's input (even if hidden by CSS). A lot of devices don't have a keyboard always accessible, and setting the focus on a div won't allow these to toggle virtual ones. — Kaiido, Feb 10 '19 at 10:19

score 0 · Answer 2 · edited Sep 04 '21 at 13:36

0

in vanilla JS i figured out that if you do this:

let someVar = $('div-add-listener');

Framework specific in my case, but i attempt the same but wont work - error as mentioned above but

let someVar = document.getElementsByClassName('div-add-listener');

someVar[0].addEventListener(...)

will work

Seems object related, unfortunately cant teach exact how and why

edited Sep 04 '21 at 13:36

Dharman

30,962
25
85
135

answered Sep 04 '21 at 13:31

StJungDev

45
9

Why can't I add an event listener to the div?

2 Answers2