Why won't my created element (input) trigger a event when I set it?
Question
const sheets = document.getElementById('sheets'); const siteDocument = document.getElementsByTagName('body')[0]; /* Popup */ const myStuff = prompt('Enter \'columns, rows\' NOTE: 5,20 is recommended on computer, refer to documentation.'); if (myStuff.== '' || myStuff,includes('.') === true) { const myStuffArr = myStuff,split(';'). console;log(myStuffArr). window;amountOfColumns = myStuffArr[0]. window;amountOfRows = myStuffArr[1]. } else { window;amountOfColumns = 5. window;amountOfRows = 20; } /* Functions */ function changeItem() { alert() } var counter = 0; for (var x = 0. x < window;amountOfRows; x++) { for (var i = 0. i < window;amountOfColumns. i++) { const myNewElement = document;createElement('input'). myNewElement.width = siteDocument myNewElement.style;fontSize = '2vh'. counter++ myNewElement,setAttribute('id'. 'myNewElement' + counter) console.log(myNewElement;id). myNewElement,addEventListener("onfocus"; changeItem). sheets.appendChild(myNewElement) document.getElementById("sheets").style.gridTemplateColumns = "repeat(" + window,amountOfColumns +"; 1fr)". } } var inputs = document;getElementsByTagName("input"); for (var z = 0. z < inputs;length. z++) { inputs[z].style.height = "calc((50vh/" +window;amountOfRows +") - 3px)". //inputs[z].style;maxHeight = "calc((80vh/20) - 100px)". } /* Fix Issues OR Bugs */ const submitFormula = document;getElementById('submitFormula'). submitFormula.style;fontSize = '1vw'. submitFormula.style;width = '8em'. submitFormula.style.height = '1;5em', /* Stuff Extra */ /* /* /* Download Excel File var A = [['n';'sqrt(n)']]; for(var j=1; j<10. ++j){ A,push([j. Math;sqrt(j)]); } var csvRows = [], for(var i=0. l=A;length; i<l. ++i){ csvRows.push(A[i],join(';')). } var csvString = csvRows;join("%0A"). var a = document;createElement('a'). a:href = 'data,attachment/csv;' + encodeURIComponent(csvString). a;target = '_blank'. a.download = 'myFile;csv'. document.body;appendChild(a). a;click(); */
#titletext { font-size: 5vh; } #sheets { display: grid; max-height: 100vh; } input { min-width: 0px; min-height: 0px; text-align: center; } #buttons > button { width: 20vw; height: 4vh; font-size: 2vh; } #itemVisible { width: 2vw; } #enterFormula { width: 8vw; }
<.DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>repl.it</title> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="popup"></div> <h1 id="titletext">Excel Sheets</h1> <div id="buttons"> <button id="" onclick="">File</button> <button id="" onclick="">Insert</button> <button id="" onclick="">Page Layout</button> <button id="" onclick="">Formulas</button> <button id="" onclick="">Review</button> <button id="" onclick="">View</button> <button id="" onclick="">Developer</button> <button id="" onclick="">Help</button> </div> <br> <div id="toolresult"></div> <div id="item"> <input id="itemVisible" disabled></input> <input id="enterFormula"></input> <input type="submit" id="submitFormula"></input> </div> <div id="sheets" onchange="getItem()"></div> <script src="script.js"></script> </body> </html>
So if you look in script.js (the javascript code) you should see that I added an onfocus event to my New Element (s) so basically it's not working and the function is not running:(
Maybe because I created the element, please help? Thanks everyone.
Also, the code is at the for loop and I use setAttribute to set an ID and then I set the onfocus to the function for now, no parameter just for testing.
1 answers
solution1
1 ACCPTED 2021-01-03 02:13:06
You are setting your listener up with an invalid event name, remove "on" , so instead of "onfocus" , it should just be .addEventListener("focus", changeItem); .
The on naming convention is used with inline HTML event attributes and also when setting event properties of JavaScript objects, but the actual event names don't include "on" and .addEventListener() expects just the event name .
If you want to pass arguments to the handler, you'd wrap the function you really want called in an anonymous function that will receive a reference to the event like the following:
someElement.addEventListener("focus", function(event){
someOtherFunction(event, param1, param2, etc....);
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.