Problems with adding button to div elements in Javascript

Question

I am new in Javascript and to get the hang of it i am trying to make a 2 do list where the end goal is to create a drag and drop list with my to2dos.

My problem is that when i click the + button that adds divs to the page it only creates delete buttons in the first div.

I searched for some hours on this forum and google could not find an answer and have been struggled for hours ... :-)

I hope you guys can give me a hint. Thanks!

HTML code:

<body>
<header class="header">
    <h1>The Drag&Drop2Do</h1>
</header>

<section class="worksection">
    <div class="workrow">
        <div class="workheader">
            <p>Dagens opgaver</p>
        </div>

    </div>

    <div class="workrow">
        <div class="workheader">
            <p>Færdige opgaver</p>
        </div>

    </div>

    <div class="workrow">
        <div class="workheader">
            <p>Udskudte opgaver</p>
        </div>

    </div>

    <div class="workrow">
        <div class="workheader">
            <p>Afsluttet opgaver</p>
        </div>

    </div>

</section>

<div class="buttonwrapper">
    <button id="btn">+</button>
</div>

<script src="./javascript/script.js"></script>

CSS code (not all ofcourse :-) ):

.workrowtask {
  width: 100%;
  background-color: gray;
  padding: 10px 0px;
  margin-top: 10px;
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-around;
}

.worktaskdelbtn {
  background-color: red;
  color: white;
  height: 15px;
  width: 15px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  outline: none;
}

Javascript:

const btn = document.querySelector('#btn');
const workRow = document.querySelector('.workrow');

btn.addEventListener('click', makePost);

function makePost() {
  const div = document.createElement('div');
  const textnode = document.createTextNode('Hello World');
  div.appendChild(textnode);
  div.setAttribute('draggable', true);
  div.className += ('workrowtask');
  workRow.appendChild(div);


  const workrowtask = document.querySelector('.workrowtask');
  const delbtn = document.createElement('button');
  const textnodebtn = document.createTextNode('-');
  delbtn.appendChild(textnodebtn);
  delbtn.className += ('worktaskdelbtn');
  workrowtask.appendChild(delbtn);
};

Here is a JSBin to show the delete buttons https://jsbin.com/xezoxitari/edit?html,css,js,output

By the way, Drag&Drop2Do is invalid HTML. You need to write Drag&Drop2Do. — CherryDT
– CherryDT, Commented Aug 20, 2020 at 23:03
@Christian Robbers Rasmussen. I added a solution for you. Hope that helps :) — HenryDev
– HenryDev, Commented Aug 20, 2020 at 23:24
@HenryDev Thank you for the good answer! It worked well and i learned something new :-) — Christian Robbers Rasmussen
– Christian Robbers Rasmussen, Commented Aug 21, 2020 at 8:47

HenryDev · Accepted Answer · 2020-08-20 23:23:03Z

You need to append your button to the div before appending it to workRow. Here's a working solution:

const btn = document.querySelector('#btn');
const workRow = document.querySelector('.workrow');

btn.addEventListener('click', makePost);

function makePost() {   

    const workrowtask = document.querySelector('.workrowtask');
    const delbtn = document.createElement('button');
    const textnodebtn = document.createTextNode('-');
    delbtn.appendChild(textnodebtn);
    delbtn.className += ('worktaskdelbtn');

    const div = document.createElement('div');
    const textnode = document.createTextNode('Hello World');
    div.appendChild(textnode);
    div.setAttribute('draggable', true);
    div.className += ('workrowtask');
    div.appendChild(delbtn);
    workRow.appendChild(div);

};

.workrowtask {
  width: 100%;
  background-color: gray;
  padding: 10px 0px;
  margin-top: 10px;
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-around;
}

.worktaskdelbtn {
  background-color: red;
  color: white;
  height: 15px;
  width: 15px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  outline: none;
}

<section class="worksection">
    <div class="workrow">
        <div class="workheader">
            <p>Dagens opgaver</p>
        </div>

    </div>

    <div class="workrow">
        <div class="workheader">
            <p>Færdige opgaver</p>
        </div>

    </div>

    <div class="workrow">
        <div class="workheader">
            <p>Udskudte opgaver</p>
        </div>

    </div>

    <div class="workrow">
        <div class="workheader">
            <p>Afsluttet opgaver</p>
        </div>

    </div>

</section>

<div class="buttonwrapper">
    <button id="btn">+</button>
</div>

JeanWolf · Accepted Answer · 2020-08-20 23:16:46Z

0

The line workRow.appendChild(div).
is only appending the div to the first workRow, you would need to create a new workRow and append it to that.

answered Aug 20, 2020 at 23:16

JeanWolf

111 bronze badge

1 Comment

Christian Robbers Rasmussen Over a year ago

Its also the purpose of it. In the end you will be able to drag the divs to the other workRows :-)

Babar Khan · Accepted Answer · 2020-08-21 06:06:53Z

0

Just replace your function with below JS function, you will see the result.

function makePost() {
 const div = document.createElement('div');
 const textnode = document.createTextNode('Hello World');
 div.appendChild(textnode);
 div.setAttribute('draggable', true);
 div.className += ('workrowtask');

 const workrowtask = document.querySelector('.workrowtask');
 const delbtn = document.createElement('button');
 const textnodebtn = document.createTextNode('-');
 delbtn.appendChild(textnodebtn);
 delbtn.className += ('worktaskdelbtn');
 div.appendChild(delbtn);
 workRow.appendChild(div);
};

answered Aug 21, 2020 at 6:06

Babar Khan

3502 silver badges8 bronze badges

Collectives™ on Stack Overflow

Problems with adding button to div elements in Javascript

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related