+ 1

JS Console Throwing TypeError on a Line That Doesn't Even Exist

Hi team, As soon as I start the app I get a TypeError from the JavaScript console on a line of code that doesn't exist at all: TypeError: document.getElementById(...) is null Line: 38 There is no line 38 in my code. The argument that I pass to getElementById is updater, which is the ID of the <p> tags at the bottom of the HTML code. Troubleshooting this error, I put in a value between the <p> tags just in case, but still I get the error, so I don't understand what it means when it says that it's null. Here's the app: https://code.sololearn.com/WL49Wo3JsMDG/#js HTML: <!DOCTYPE html> <html> <head> <title>Sword Roulette</title> </head> <body> <h2>Number of unbelievers in the execution circle:</h2><br /> <input type = "text" id = "killBox"/> <button type ="button" onclick = createUnbelievers()>Create some unbelievers</button> <button type ="button" onclick = getListOfUnbelievers()>List the unbelievers</button> <button type ="button" onclick = killUnbelievers()>Kill the unbelievers!</button> <button type ="button" onclick = resurrect()>Resurrect!</button> <p id = "updater">Test</p> </body> </html> JavaScript: var unbelieverList = []; var numberOfUnbelievers = document.getElementById("killBox").value; var statusMessage = document.getElementById("updater"); statusMessage.innerHTML = ""; function createUnbelievers() { // create infidels statusMessage.innerHTML += "Creating unbelievers..."; for (unb = 0; unb < numberOfUnbelievers; unb++) { unbelieverList.push("Unbeliever" + Math.random(2)); statusMessage.innerHTML += "Unbelievers have been created."; } } function getListOfUnbelievers() { statusMessage.innerHTML += "\n\nList of Known Unbelievers\n"; for (unb = 0; unb < unbelieverList.length; unb++) { statusMessage.innerHTML += unbelieverList[unb]; + "\n"; } } function killUnbelievers() { statusMessage.innerHTML = "\n\nKilling the unbeliever

javascript typeerror getelementbyid

14th Mar 2018, 11:12 PM

pizzaholic81

3 Answers

+ 1

You should not put spaces between attributes and its values in your html. For example id = "killbox" should become id="killbox"

14th Mar 2018, 11:30 PM

Vladi Petrov

+ 1

@菜々子林 wrote: << The browser parses all JavaScript before creating the DOM tree (unless your script tag is above the </body> tag) >> Not exactly... the browser parse the html document linearly, creating the DOM tree while parsing... but when encountering <script> tag, parsing is suspended while the JS content is immediatly executed without waiting for complete document parsed. So JS can only access already parsed content in the DOM at running time. And JS tab of code playground web projects is virtually linked at end of <head> part of html tab (as for css tab), so JS tab content is executed before <body> part was parsed and so reachable through DOM tree ^^ But you can access DOM tree <head> content, which is already created, and you can access any element of the document before a specific <script> tag as soon as it's executed (but not elements following this <script> tag, as parsing have not already occured, and related DOM tree nodes doesn't exist at this time)

15th Mar 2018, 10:12 AM

visph