Question 42971 in Html Question posted in
Some basic documentation can be found here.

Making a todo list but not working, document.getElementById stuff – Html

job = document.getElementById("job")
job.addEventListener('click', addJob)
jobInput = document.getElementById("jobInput")
breakObject = document.getElementById("break")
cnt = 1
function addJob() {
  breakObject.insertAdjacentHTML('afterEnd', "</div>")
  breakObject.insertAdjacentHTML('afterEnd', "<button class='delete'> Delete </button>")
  temp = "<p>".concat(jobInput.value, "</p>")
  breakObject.insertAdjacentHTML('afterEnd', temp)
  
  breakObject.insertAdjacentHTML('afterEnd', "<br>")
  breakObject.insertAdjacentHTML('afterEnd', "<div id='del".concat(cnt.toString, "'>"))
  
  document.getElementById('del'.concat(cnt.toString)).addEventListener('click', deleteObj(document.getElementById('del'.concat(cnt.toString))))
  cnt = cnt+1
}

function deleteObj(obj) {
  obj.remove()
  console.log("debug")
}
.specialButton {
  background-color: navy;
  color: white;
  height: 25px;
  width: 75px;
  border-radius: 10px;
  border: none;
  transition-duration: 0.3s;
}
.specialButton:hover {
  color: navy;
  background-color: white;
  border: solid;
  border-color: navy;
}

p {
  font-family: "Lucida Console", monospace;
  color: yellow;
}

.delete {
  width: 60px;
  height: 20px;
  background-color: red;
}
.delete:hover {
  width: 60px;
  height: 20px;
  border-color: red;
  color: red
}
<div id="jobList">
  <input id="jobInput" type="text">
  <button class="specialButton" id="job">Add </button>
</div>
<br id="break">

Any idea why my todo list isn’t working? I know that the concat delete place is not very clear but please help me to code one that actually works. I don’t know any other way that can get this to work so please help me. Thanks in advance.

Tags:

2

Answers


  1. 0

    It is much more convenient to create elements with document.createElement rather than manipulating HTML strings.

    function addJob() {
    const div = document.createElement('div');
    const p = document.createElement('p');
    p.textContent = jobInput.value;
    const btn = document.createElement('button');
    btn.className = 'delete';
    btn.textContent = 'Delete';
    div.append(p, btn, document.createElement('br'));
    btn.addEventListener('click', e => div.remove());
    breakObject.after(div);
}
    Login or Signup to reply.
  2. 0

    As @Unmitigated said , it convenient to use document.createElement and you are calling the delete function on eventlistener immediately

    Don’t pass any arguments in call back functions like on click

    let job = document.getElementById("job");
job.addEventListener('click', addJob);
let jobInput = document.getElementById("jobInput")
const todos =  document.getElementById("todos")
cnt = 1
function addJob() {
  const v = jobInput.value;
  const div = document.createElement('div');
  const button = document.createElement('button');
  const p = document.createElement('p');
  p.innerText = v;//value
  button.className = 'delete';
  button.textContent = 'Delete';
  button.onclick = deleteObj;
  div.append(p);
  div.append(button);
  todos.append(div)
  cnt = cnt+1
}

function deleteObj() {
  this.parentElement.remove()
}
    .specialButton {
  background-color: navy;
  color: white;
  height: 25px;
  width: 75px;
  border-radius: 10px;
  border: none;
  transition-duration: 0.3s;
}
.specialButton:hover {
  color: navy;
  background-color: white;
  border: solid;
  border-color: navy;
}

p {
  font-family: "Lucida Console", monospace;
  color: black;
}

.delete {
  width: 60px;
  height: 20px;
  background-color: red;
}
.delete:hover {
  width: 60px;
  height: 20px;
  border-color: red;
  color: black;
}
    <div id="jobList">
  <input id="jobInput" type="text">
  <button class="specialButton" id="job">Add </button>
</div>
<div id='todos'></div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search