Fri. Jun 2nd, 2023

[ANSWERED] javascript – how do i make the code differentiate between several buttons in my todoapp?

By

Nov 19, 2022 html, innerhtml, input, javascript

Solution 1 :

Delegate and use a UL

const buttons = `<button type="button" class='edit'>edit</button> <button type="button" class="del">delete</button>`

const ul = document.getElementById("ss");
document.getElementById("add").addEventListener("click", function() {
  document.getElementById("ss").innerHTML += `<li>
      <span>${document.getElementById("text").value}</span> ${buttons}
    </li>`
})
ul.addEventListener("click", function(e) {
  const tgt = e.target;
  if (tgt.classList.contains("edit") && !document.getElementById('etext')) {
    const li = tgt.closest("li")
    li.innerHTML = "<input type='text' id='etext' value='" + li.querySelector('span').textContent + "'><button type='button' class='done'>done</button>";
  } else if (tgt.classList.contains("done")) {
    tgt.closest("li").innerHTML = `${document.getElementById("etext").value} ${buttons}`
  } else if (tgt.classList.contains("del")) {
    tgt.closest("li").remove();
  }
})
document.getElementById("delAll").addEventListener("click", function() {
  ul.innerHTML = "";
})

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

<input type="text" id="text" value="">
<button id="add" type="button">add</button><button id="delAll" type="button">Delete all</button><hr/>
<ul id="ss"></ul>

Solution 2 :

I deleted the id, because they are not unique when adding dynamically identical list items. I tweaked edit and done function to make it functional. Hopefully it helps you further.

function add() {
  document.getElementById("ss").innerHTML += "<div class='entry'><span class='value'>" + document.getElementById("text").value + "</span><button onclick='edit(this)'>edit</button>" + "<button onclick='del(this)'>delete</button><br></div>";
}

function edit(elem) {
  elem.outerHTML = "<input type='text' value=''>" + "<button onclick='done(this)'>done</button>";
}

function done(elem) {
  let children = elem.parentElement.childNodes;
  let spanElem, inputElem;
  for (var i=0; i < children.length; i++) {
    if (children[i].tagName == "SPAN") {
        spanElem = children[i];
    }
    if (children[i].tagName == "INPUT") {
        inputElem = children[i];
    }
  }
  spanElem.innerHTML = inputElem.value;
  elem.outerHTML = "<button onclick='edit(this)'>edit</button>";
  elem.remove();
  inputElem.remove();
}

function del(elem) {
  elem.parentElement.remove();
}

<html>

<head>
</head>

<body>
  <input type="text" id="text" value="">
  <button id="button" type="button" onclick="add()">add</button>
  <div id="ss"></div>
</body>

</html>

Problem :

hi so i am trying to make “todoapp” but it is not working as intended: if there are more then one task
in a list edit and delete buttons are bugged. please help. how do i make the code differentiate between several tasks?
my code:

<head>
</head>
<body>
    <input type="text" id="text" value="">
    <button id="button" type="button" onclick="add()">add</button>
    <div id="ss"></div>
    <script>
        function add(){
        document.getElementById("ss").innerHTML +=  document.getElementById("text").value + "<button id='edit' onclick='edit()'>edit</button>"+"<button id='edit' onclick='del()'>delete</button>"+"<br>";
        }
        function edit(){
            document.getElementById("edit").outerHTML =  "<input type='text' id='etext' value=''>"+"<button id='done' onclick='done()'>done</button>";
        }
        function done(){
            document.getElementById("ss").innerHTML =  document.getElementById("etext").value + "<button id='edit' onclick='edit()'>edit</button>"+"<button id='edit' onclick='del()'>delete</button>"+"<br>";;
        }
        function del(){
            document.getElementById("ss").innerHTML = "<div></div>";
        }
    </script>    
</body>
</html>```

Comments

Comment posted by Harinder Singh

You should pass something unique such as index or id of task to delete/edit/modify it. Your logic should search for specific todo from list and perform desired action only on it.

Comment posted by mplungjan

Your BRs stay behind

Comment posted by Adriaan De Bolle

Ok, thanks, I moved the break into the parent div.

By

Related Post

[ANSWERED] How do you add a background image in the margins and top of the page behind the body? (Html, Css)

Nov 20, 2022

[ANSWERED] html – I can’t get my carousel buttons to respond bootstrap 4

Nov 20, 2022

[ANSWERED] javascript – Locomotive Scroll not working with Vue.js when having to load images on page

Nov 20, 2022