Add div onclick with javascript

Question

I am completely new to Javascript (and Stack Overflow) and I want to build a blog that allows the user to create a div onclick. I referenced this article on w3shool and tried all the three methods listed. However, the div doesn't show up when I use the first two methods and appears without clicking when I use the third one.
Here's my code for the third method:

HTML

<button class="box4" id="newEntry">NEW</button>

Javascript

const parent = document.getElementById("entries");

document.getElementById("newEntry").addEventListener("click", newEntry);

function newEntry() {
    var newDiv = document.createElement("div");
    parent.appendChild(newDiv);
}

For the second method, I replaced line 2 with

document.getElementById("newEntry").onclick= function () {newEntry()};

I have seen similar questions, but none of them solved my problem, so I would really appreciate your help.

Switch to [MDN](//developer.mozilla.org/docs/Web/JavaScript/Guide). W3Schools is still pretty outdated. — Sebastian Simon, Sep 17 '21 at 10:59
you should use event delegation https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events — GrafiCode, Sep 17 '21 at 11:00
_“appears without clicking when I use the third one”_ — Did you use `object.addEventListener("click", newEntry());`? That’s a beautiful example of how bad W3Schools is. It’s supposed to be `object.addEventListener("click", newEntry);`. The second argument must be a function. W3Schools documents this as `object.addEventListener("click",` _myScript_ `);`, as if you could put arbitrary JS code as an argument… — Sebastian Simon, Sep 17 '21 at 11:06
Edit: problem solved. There's nothing wrong with the Javascript and the mistake is in the HTML. — irisnviolets, Sep 17 '21 at 16:54

score 1 · Answer 1 · answered Sep 17 '21 at 11:38

There's nothing wrong with you code. It works fine. just one thing you have to remember: Div by default have no height, so if you want make sure to visualize it, just add height and color to it, like the code bellow.

const parent = document.getElementById("entries");
parent.style.width = '150px';
parent.style.height = '150px';
parent.style.backgroundColor = 'red';

document.getElementById("newEntry").addEventListener("click", newEntry);

function newEntry() {
    var newDiv = document.createElement("div");
    newDiv.style.width = '50px';
    newDiv.style.height = '50px';
    newDiv.textContent = 'Entry';
    newDiv.style.backgroundColor = 'white';
    parent.appendChild(newDiv);
}

<div id="entries"></div>
<button id="newEntry">new Entry</button>

Thank you. I did add height and width to the new div (I didn't put the css here) and it worked when I called the newEntry function in Javascript, but I can't get it to work if I click. — irisnviolets, Sep 17 '21 at 11:44

score 0 · Answer 2 · edited Sep 17 '21 at 12:50

Here is an example:

You can use querySelectorAll with a css selector to query all the elements matching the selector, but you can use the getElementByName too. In your example you query the elements by ID, but I don't se where you set the ids.

function onInitClick(){
  const buttons = document.querySelectorAll('button');
  const secondButton = buttons[1];
  secondButton.addEventListener('click', createButtonAndAppend);
  secondButton.innerText = 'Click me';
}

function createButtonAndAppend(){ 
     const button = document.createElement('button');
     button.addEventListener('click', createButtonAndAppend);
     button.innerText = 'Adds another button';
     document.body.append(button);
}

<button onclick="onInitClick();">Add click to second button</button> <button>Nothing happens</button>

score -3 · Answer 3 · answered Sep 17 '21 at 11:01

-3

you can do it simply using jquery.

if you want to add something to div,

$("#your_div_id").html("your child element")

for example

<div id="example"></div>

$("#example").html("<h1>Hello world</h1>")

then result is

<div id="example"><h1>Hello world</h1></div>

answered Sep 17 '21 at 11:01

Keigo Igarashi

113
1
1
13

2

This question is unrelated to jQuery. If it’s not tagged [tag:jquery], avoid answering with jQuery. – Sebastian Simon Sep 17 '21 at 11:07

Add div onclick with javascript

3 Answers3