Html Question posted in
Some basic documentation can be found here.

Html – Why is my function not running on a keydown event? (Native JS)

Currently, I am making a small table that grows as needed (not important). At first, I made it so that after the table changes, a new row would be added below. Now I want it to be so that a new row is only added after hitting Enter. However, when I transfer the function that controls this from it’s normal event listener to a keydown event listener, it does not work.

Question: How can I get my function to work inside of a keydown event listener?

Edit: The events now work (after some tweaking).

const table = document.querySelector('#table');
const addRowButton = document.querySelector('#addRow');

let firstNamesArray = [];
let lastNamesArray = [];
let rowNumber = 0;

function addRow() {
    let row = table.insertRow(-1);
    let cell1 = row.insertCell(0);
    let cell2 = row.insertCell(1);
    let firstNameInput = document.createElement("input");
    let lastNameInput = document.createElement("input");

    firstNameInput.type = "text";
    firstNameInput.setAttribute('id', `firstName${rowNumber}`);
    cell1.appendChild(firstNameInput);
        
    lastNameInput.type = "text";
    lastNameInput.setAttribute('id', `lastName${rowNumber}`);
    cell2.appendChild(lastNameInput);

    //Works
    //lastNameInput.addEventListener('change', onRowChange);

    /* Does not work
    window.addEventListener('keydown', (event) => {
        switch (event.key) {
            case 'Enter':
                alert("enter")
                onRowChange();
            break;
        }
    })  
    */

    //Does not work
    window.addEventListener('keydown', (event) => {
        if (event.key == 'Enter') {
            alert("enter");
            onRowChange();
        }
    }, false)
}

function onRowChange(e) {
    createNames();

    if ([ ...e.target.parentNode.parentNode.children ].every(c => c.children[0].value)) {
        rowNumber++;
        addRow();
    }
}

function createNames() {
    let firstName = document.getElementById(`firstName${rowNumber}`).value;
    let lastName = document.getElementById(`lastName${rowNumber}`).value;
    firstNamesArray.push(firstName);
    lastNamesArray.push(lastName);
}

addRowButton.addEventListener('click', () => {
    addRow();
    addRowButton.disabled = true;
})       
table {
    text-align: center;
    align-items: center;
    border: 1px solid black;
    border-collapse: collapse;
}

th {
    width: 50vmin;
    height: 10vmin;
    font-size: 20pt;
    font-weight: 800;
}

input {
    width: 50vmin;
    height: 5vmin;
    text-align: center;
    align-items: center;
    font-size: 18pt;
    font-weight: 400;
    font-family: Georgia, 'Times New Roman', Times, serif;
    border: 0;
    padding: 0;
}
<html>
    <head>
        <meta charset="UTF-8">
    </head>

    <body>
        <article id="input-article">
            <table id="table" border="1">
                <tr>
                    <th>First Name:</th>
                    <th>Last Name:</th>
                </tr>
            </table> <br>

            <div id="buttons">
                <button id="addRow">Add Row</button>
                <button id="submit">Submit</button>
            </div>
        </article>

        <script src="app.js"></script>
    </body>
</html>
Tags:

2

Answers


  1. 0

    The problem is that you need to pass event to onRowChange, without that it can’t access e.target.parentNode.parentNode.children, and so it causes an error and does not add the rows. Changing your event listener to either of the following resolves the issue.

    window.addEventListener('keydown', (event) => {
        switch (event.key) {
            case 'Enter':
                console.log("enter was pressed")
                onRowChange(event);
            break;
        }
    })  

        window.addEventListener('keydown', (event) => {
        if (event.key == 'Enter') {
            onRowChange(event);
        }
    }, false)
    Login or Signup to reply.
  2. 0

    you need to pass event to onRowChange function like this

    window.addEventListener(‘keydown’, (event) => {
    switch (event.key) {
    case ‘Enter’:
    alert("enter")
    onRowChange(event);
    break;
    }
    })

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search