Access DOM element in onload function
Question
Hey i want to build this calculator that upon page load is supposed to generate random numbers and depict them in the DOM. Now I get this error message saying: "cannot assign to function call". Can someone help me fix this. Thanks in advance.
let add1; let add2; function displayNewEquation() { add1 = Math.floor(Math.random() * 500); add2 = Math.floor(Math.random() * 500); document.getElementsByTagName("equation") = `<p> ${add1} + ${add2} = </p>`; } window.onload = () => { displayNewEquation(); }; function checkEquation() { var input = parseInt(document.getElementById("solution").value); console.log(input); if (input == add1 + add2) { displayNewEquation(); } else { var inputfield = document.getElementById("solution"); inputfield.style.borderColor = "crimson"; } }
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width. initial-scale=1.0" /> <title>mathle</title> <link rel="stylesheet" href="Style/Addition.css" /> <script type="text/javascript" src="./Logic/Addition.js"></script> </head> <body> <div class="additionIntro"> <p class="title"> - Addition - </p> <button class="back" onclick="goHome()">Back</button> </div> <div class="additionMain"> <div class="calculation"> <p class="equation">9 + 13 =</p> <input id="solution" type="number" oninput="checkEquation()" /> </div> </div> </body> </html>
2 answers
solution1
2 2020-04-23 15:19:21
As @Patrick Evans commented, it looks like your setting the Html for the equation element was not using the innerHTML value. I'm not sure what else you are looking for from your example but the snippet below at least runs. Maybe you can update your question if this is not the issue:
let add1; let add2; function displayNewEquation() { add1 = Math.floor(Math.random() * 500); add2 = Math.floor(Math.random() * 500); // This was the only line change document.getElementsByTagName("equation").innerHTML = '<p> ${add1} + ${add2} = </p>'; } window.onload = () => { displayNewEquation(); }; function checkEquation() { var input = parseInt(document.getElementById("solution").value); console.log(input); if (input == add1 + add2) { displayNewEquation(); } else { var inputfield = document.getElementById("solution"); inputfield.style.borderColor = "crimson"; } } function goHome(){ alert("Do something"); }
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width. initial-scale=1.0" /> <title>mathle</title> <link rel="stylesheet" href="Style/Addition.css" /> <script type="text/javascript" src="./Logic/Addition.js"></script> </head> <body> <div class="additionIntro"> <p class="title"> - Addition - </p> <button class="back" onclick="goHome()">Back</button> </div> <div class="additionMain"> <div class="calculation"> <p class="equation">9 + 13 =</p> <input id="solution" type="number" oninput="checkEquation()" /> </div> </div> </body> </html>
solution2
2 ACCPTED 2020-04-23 15:28:22
There are two errors is in this line:
document.getElementsByTagName("equation") = `<p> ${add1} + ${add2} = </p>`;
.getElementsByTagName:equationis a class, not a tag name, use.getElementsByClassName('equation')[0]or.querySelector('.equation')instead.Assignment to function call
You can assign values only to variables and object properties, but not to function call results. That wouldn't even be meaningful, (as JS doesn't have pointers): You would try to override the return value of the function, without even knowing what it is.
In your case, you're trying to override the contents of the returned DOM element. That can be done by assigning to a property or calling a function.
.innerHTML:let add1; let add2; function displayNewEquation() { add1 = Math.floor(Math.random() * 500); add2 = Math.floor(Math.random() * 500); document.querySelector(".equation").innerHTML = `<p> ${add1} + ${add2} = </p>`; } window.onload = () => { displayNewEquation(); }; function checkEquation() { var input = parseInt(document.getElementById("solution").value); console.log(input); if (input == add1 + add2) { displayNewEquation(); } else { var inputfield = document.getElementById("solution"); inputfield.style.borderColor = "crimson"; } }<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width. initial-scale=1.0" /> <title>mathle</title> <link rel="stylesheet" href="Style/Addition.css" /> <script type="text/javascript" src="./Logic/Addition.js"></script> </head> <body> <div class="additionIntro"> <p class="title"> - Addition - </p> <button class="back" onclick="goHome()">Back</button> </div> <div class="additionMain"> <div class="calculation"> <p class="equation">9 + 13 =</p> <input id="solution" type="number" oninput="checkEquation()" /> </div> </div> </body> </html>.textContent:let add1; let add2; function displayNewEquation() { add1 = Math.floor(Math.random() * 500); add2 = Math.floor(Math.random() * 500); document.querySelector(".equation").textContent = `${add1} + ${add2} =`; } window.onload = () => { displayNewEquation(); }; function checkEquation() { var input = parseInt(document.getElementById("solution").value); console.log(input); if (input == add1 + add2) { displayNewEquation(); } else { var inputfield = document.getElementById("solution"); inputfield.style.borderColor = "crimson"; } }<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width. initial-scale=1.0" /> <title>mathle</title> <link rel="stylesheet" href="Style/Addition.css" /> <script type="text/javascript" src="./Logic/Addition.js"></script> </head> <body> <div class="additionIntro"> <p class="title"> - Addition - </p> <button class="back" onclick="goHome()">Back</button> </div> <div class="additionMain"> <div class="calculation"> <p class="equation">9 + 13 =</p> <input id="solution" type="number" oninput="checkEquation()" /> </div> </div> </body> </html>
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.