Реализация кнопки удаления для каждого элемента в списке (Javascript) - PullRequest
Новая
       1

Реализация кнопки удаления для каждого элемента в списке (Javascript)

0 голосов
/ 04 июля 2018

Привет, как часть упражнения, я должен создать список задач со следующей реализацией. Когда я нажимаю кнопку TODO, появляется окно с предложением цели, которую я имею в виду, затем оно добавляется в список, и количество элементов устанавливается равным количеству элементов в списке.

В списке также есть кнопка удаления и кнопка проверки для каждого элемента. Кнопка проверки используется, чтобы определить, была ли достигнута цель, а кнопка удаления - для удаления определенной цели.

К сожалению, моя кнопка удаления не работает. Когда я щелкаю по нему, вместо удаления выбранного элемента, он удаляет первый элемент в списке. Я до сих пор не уверен, почему. Может ли кто-нибудь предоставить правильный код, чтобы это исправить? Спасибо. 

const classNames = {
  TODO_ITEM: 'todo-container',
  TODO_CHECKBOX: 'todo-checkbox',
  TODO_TEXT: 'todo-text',
  TODO_DELETE: 'todo-delete',
}

const list = document.getElementById('todo-list')
const itemCountSpan = document.getElementById('item-count')
const uncheckedCountSpan = document.getElementById('unchecked-count')

//This function creates a new list element
function newTodo() {
  var clicks = document.getElementsByTagName("input").length;
  var item = prompt("Please enter a goal", " ")
  if(item == null){
    return cheese
  }
  clicks ++;
  itemCountSpan.innerHTML = clicks;
  list.innerHTML = list.innerHTML + "<li id = 'clicks'> <input type = checkbox onclick = 'checker()' class = 'todo-checkbox'>Goal: " + item +
  "</input>" + "<button class = 'todo-delete' value = clicks onclick = 'deleteToDo(this.value)'>Delete</button></li>"

}
//This function sets the unchecked count
function checker(){
    var Total = 0;
    for (var i = 0; i < document.getElementsByTagName("input").length; i++){
      if (!document.getElementsByTagName("input")[i].checked){
        Total ++;
        uncheckedCountSpan.innerHTML = Total;
      }
  }
}
//This function deletes a list element selected
function deleteToDo(sel_id){

  list.removeChild(document.getElementsByTagName("li")[sel_id]);
  var clicks = document.getElementsByTagName("input").length;
  itemCountSpan.innerHTML = clicks;

}
* {
  box-sizing: border-box;
}

html, body {
  background-color: #eee;
  margin: 0;
  padding: 0;
}

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

.center {
  align-self: center;
}

.flow-right {
  display: flex;
  justify-content: space-around;
}

.container {
  max-width: 800px;
  margin: 0 auto;
  padding: 10px;
  display: flex;
  flex-direction: column;
  background-color: white;
  height: 100vh;
}

.title, .controls, .button {
  flex: none;
}

.button {
  padding: 10px 20px;
}

.todo-list {
  flex: 1 1 0;
  margin-top: 20px;
  padding: 20px;
  overflow-y: auto;
}

.todo-delete {
  margin: 10px;
}

.todo-checkbox {
  margin: 10px;
}

.todo-container {
  padding: 20px;
  border-bottom: 1px solid #333;
}

.todo-container:first-of-type {
  border-top: 1px solid #333;
}
<!DOCTYPE html>
<html>
  <head>
    <title>TODO App</title>
    <link rel="stylesheet" type="text/css" href="./styles.css" />
  </head>
  <body>
    <div class="container center">
      <h1 class="center title">My TODO App</h1>
      <div class="flow-right controls">
        <span>Item count: <span id="item-count">0</span></span>
        <span>Unchecked count: <span id="unchecked-count">0</span></span>
      </div>
      <button class="button center" onClick="newTodo(); checker()">New TODO</button>
      <ul id="todo-list" class="todo-list"></ul>
    </div>
    <script src="./script.js"></script>
  </body>
</html>

Ответы [ 3 ]

0 голосов
/ 04 июля 2018

Я думаю, что у вас есть некоторые синтаксические ошибки в строке, где вы строите новый список li, просто размещение цитат. Я думаю, что так должно быть, чтобы переменная кликов фактически была установлена ​​в качестве идентификатора и значения вместо слова «клики». 

list.innerHTML = list.innerHTML + "<li id = '" + clicks + "'> <input type = 'checkbox' onclick = 'checker()' class = 'todo-checkbox'>Goal: " + item +
  "</input>" + "<button class = 'todo-delete' value = '" + clicks + "' onclick = 'deleteToDo(this.parentElement)'>Delete</button></li>"
0 голосов
/ 04 июля 2018

value необходимо установить для фактической переменной в этой функции. Так что все, что я сделал, было: 

... value = " + (clicks-1) ...
//We use (clicks - 1) because the array is 0 based but clicks was previously incremented.


const classNames = {
  TODO_ITEM: 'todo-container',
  TODO_CHECKBOX: 'todo-checkbox',
  TODO_TEXT: 'todo-text',
  TODO_DELETE: 'todo-delete',
}

const list = document.getElementById('todo-list')
const itemCountSpan = document.getElementById('item-count')
const uncheckedCountSpan = document.getElementById('unchecked-count')

//This function creates a new list element
function newTodo() {
  var clicks = document.getElementsByTagName("input").length;
  var item = prompt("Please enter a goal", " ")
  if(item == null){
    return cheese
  }
  clicks++;
  itemCountSpan.innerHTML = clicks;
  list.innerHTML = list.innerHTML + "<li id = 'clicks'> <input type = checkbox onclick = 'checker()' class = 'todo-checkbox'>Goal: " + item +
  "</input>" + "<button class = 'todo-delete' value = " + (clicks-1) + " onclick = 'deleteToDo(this.value)'>Delete</button></li>"

}
//This function sets the unchecked count
function checker(){
    var Total = 0;
    for (var i = 0; i < document.getElementsByTagName("input").length; i++){
      if (!document.getElementsByTagName("input")[i].checked){
        Total ++;
        uncheckedCountSpan.innerHTML = Total;
      }
  }
}
//This function deletes a list element selected
function deleteToDo(sel_id){
  list.removeChild(document.getElementsByTagName("li")[sel_id]);
  var clicks = document.getElementsByTagName("input").length;
  itemCountSpan.innerHTML = clicks;

}
* {
  box-sizing: border-box;
}

html, body {
  background-color: #eee;
  margin: 0;
  padding: 0;
}

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

.center {
  align-self: center;
}

.flow-right {
  display: flex;
  justify-content: space-around;
}

.container {
  max-width: 800px;
  margin: 0 auto;
  padding: 10px;
  display: flex;
  flex-direction: column;
  background-color: white;
  height: 100vh;
}

.title, .controls, .button {
  flex: none;
}

.button {
  padding: 10px 20px;
}

.todo-list {
  flex: 1 1 0;
  margin-top: 20px;
  padding: 20px;
  overflow-y: auto;
}

.todo-delete {
  margin: 10px;
}

.todo-checkbox {
  margin: 10px;
}

.todo-container {
  padding: 20px;
  border-bottom: 1px solid #333;
}

.todo-container:first-of-type {
  border-top: 1px solid #333;
}
<!DOCTYPE html>
<html>
  <head>
    <title>TODO App</title>
    <link rel="stylesheet" type="text/css" href="./styles.css" />
  </head>
  <body>
    <div class="container center">
      <h1 class="center title">My TODO App</h1>
      <div class="flow-right controls">
        <span>Item count: <span id="item-count">0</span></span>
        <span>Unchecked count: <span id="unchecked-count">0</span></span>
      </div>
      <button class="button center" onClick="newTodo(); checker()">New TODO</button>
      <ul id="todo-list" class="todo-list"></ul>
    </div>
    <script src="./script.js"></script>
  </body>
</html>
0 голосов
/ 04 июля 2018

Это будет работать. Просто передайте удаляемый элемент li через обработчик onclick и удалите его из элемента ul. 

const classNames = {
  TODO_ITEM: 'todo-container',
  TODO_CHECKBOX: 'todo-checkbox',
  TODO_TEXT: 'todo-text',
  TODO_DELETE: 'todo-delete',
}

const list = document.getElementById('todo-list')
const itemCountSpan = document.getElementById('item-count')
const uncheckedCountSpan = document.getElementById('unchecked-count')

//This function creates a new list element
function newTodo() {
  var clicks = document.getElementsByTagName("input").length;
  var item = prompt("Please enter a goal", " ")
  if(item == null){
    return cheese
  }
  clicks ++;
  itemCountSpan.innerHTML = clicks;
  list.innerHTML = list.innerHTML + "<li id = 'clicks'> <input type = checkbox onclick = 'checker()' class = 'todo-checkbox'>Goal: " + item +
  "</input>" + "<button class = 'todo-delete' value = clicks onclick = 'deleteToDo(this.parentElement)'>Delete</button></li>"

}
//This function sets the unchecked count
function checker(){
    var Total = 0;
    for (var i = 0; i < document.getElementsByTagName("input").length; i++){
      if (!document.getElementsByTagName("input")[i].checked){
        Total ++;
        uncheckedCountSpan.innerHTML = Total;
      }
  }
}
//This function deletes a list element selected
function deleteToDo(elem){

  list.removeChild(elem);

}
* {
  box-sizing: border-box;
}

html, body {
  background-color: #eee;
  margin: 0;
  padding: 0;
}

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

.center {
  align-self: center;
}

.flow-right {
  display: flex;
  justify-content: space-around;
}

.container {
  max-width: 800px;
  margin: 0 auto;
  padding: 10px;
  display: flex;
  flex-direction: column;
  background-color: white;
  height: 100vh;
}

.title, .controls, .button {
  flex: none;
}

.button {
  padding: 10px 20px;
}

.todo-list {
  flex: 1 1 0;
  margin-top: 20px;
  padding: 20px;
  overflow-y: auto;
}

.todo-delete {
  margin: 10px;
}

.todo-checkbox {
  margin: 10px;
}

.todo-container {
  padding: 20px;
  border-bottom: 1px solid #333;
}

.todo-container:first-of-type {
  border-top: 1px solid #333;
}
<div class="container center">
      <h1 class="center title">My TODO App</h1>
      <div class="flow-right controls">
        <span>Item count: <span id="item-count">0</span></span>
        <span>Unchecked count: <span id="unchecked-count">0</span></span>
      </div>
      <button class="button center" onClick="newTodo(); checker()">New TODO</button>
      <ul id="todo-list" class="todo-list"></ul>
    </div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...