Manipulating DOM in Javascript not working out

Question

Hi I'm trying to create a simple calculator website, and I'm trying to manipulate the DOM to display an updating equation, but it won't add the child to the display container.

HTML:

<body>
    <div class="body">
        <div id="display"></div>

In the Javascript, I have the following code to add an element to the "display" div:

JAVASCRIPT:

const display = document.querySelector("#display");

var eqnDisp = document.createElement("p");
eqnDisp.classList.add("eqnDisp");
eqnDisp.textContent = "DISPLAY SOMETHING";
display.appendChild(eqnDisp);

Am I missing a line? I have the exact code for another page and it works but not here.

I would recommend you open your browser console and check that for errors. If you have any please take a copy of the error(s) and update your question so you can include them. Thank you. — NewToJS, Dec 25 '18 at 01:57
Comment from [**Mahmoud Dafer:**](https://stackoverflow.com/users/8434189/mahmoud-dafer) it works when I try it but don't forget to close the div tag with class body. Can you please share how you are linking the js code? is it inline or external file? It may not be included correctly. — NewToJS, Dec 25 '18 at 02:05
I closed this, and the reason it doesn't work is your invalid `id`. They can't just be a single number. — Asons, Dec 25 '18 at 08:36
And next time, post a [mcve], which simply means, the issue you have needs to be reproduced with the posted code, and that code should be within the question. Links to external resources in either comment or answer is not good enough as when they die, so does the value of the question. — Asons, Dec 25 '18 at 08:39

Wais Kamal · Answer 1 · 2018-12-25T07:56:23.747

The example you provided is finely working:

const display = document.querySelector("#display");

var eqnDisp = document.createElement("p");
eqnDisp.classList.add("eqnDisp");
eqnDisp.textContent = "DISPLAY SOMETHING";
display.appendChild(eqnDisp);

<div class="body">
  <div id="display"></div>
</div>

Your <script> tag needs to be placed after the body content, not in the <head> section. This is because you must wait for the DOM to get loaded before you can use DOM methods such as document.querySelector() (i.e. at the point where your script is executing, document is undefined). If you still want your script file in the <head> section, modify it this way:

window.onload = function() {
  const display = document.querySelector("#display");

  var eqnDisp = document.createElement("p");
  eqnDisp.classList.add("eqnDisp");
  eqnDisp.textContent = "DISPLAY SOMETHING";
  display.appendChild(eqnDisp);
}

However, the code you posted here is not causing the problem. There are many other errors in the JSFiddle you provided. Here are the errors:

let btn1 = document.querySelector("#1");

As stated earlier, this won't work with IDs starting with a number. Correct is using document.getElementById()

btn1.addEventListener("click", include("1"));

This is another mistake. The above line will only call include("1") once, and not on every click. This is not how you pass a parameter to a function inside an event listener. Correct is using

btn1.addEventListener("click", function() {
  include("1");
});

...which will call include("1") whenever btn1 is clicked.

btnCLR.addEventListener("click", clearDisp());

If you want to call a function without parameters, remove the brackets. Only call clearDisp, not clearDisp().

equation.concat(value);

equation is a string, not an array. Use the normal addition (concatentation) operator:

equation += value;

Then, you have many functions inside event listeners which you didn't define. Either define these functions, or comment out the whole event listener. You will end up with a working calculator.

Thanks @Wais Kamal that makes sense. However, when I integrate that code into my project as a whole that's when it wouldn't work. Could you try taking a look here: jsfiddle.net/r4v23eys — Wais Shahbaz, Dec 25 '18 at 05:51

Manipulating DOM in Javascript not working out

1 Answers1