Изменение стиля только на одном элементе <li>при нажатии на него - PullRequest
Новая
       9

Изменение стиля только на одном элементе <li>при нажатии на него

0 голосов
/ 09 октября 2018

У меня есть задание в универе делать список покупок только в HTML и javascript.И когда я нажимаю на элемент li, он должен сменить стиль на линейный.Но когда я попытался сделать это, все элементы li получили сквозной канал, а не тот, на который я нажал.Я долго пытался это исправить, и теперь мой код не работает вообще. Пожалуйста, помогите мне

Это мой HTML: 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<title>Inköpslista</title>
</head>
<body>
<h2>Inköpslista</h2>
    <div>
    <input type="text" id="myInput" placeholder="Ange vara..."/>
    <button onclick="nyttElement()">Lägg till</button>
    </div>

    <ul id="myUL">
        <li>Kakor</li>
        <li>Bullar</li>
        <li style="text-decoration: line-through;">Nutella</li>
     </ul>
    <script src="lista.js"></script>
  </body>
 </html>

Это javascript для добавления нового элемента li в мой список: 

function nyttElement(){
    var newItem = document.createElement("li");
    var item = document.getElementById("myInput").value;
    var text = document.createTextNode(item);
    newItem.appendChild(text);
    document.getElementById("myUL").appendChild(newItem);
}

И это прекрасно работает, пока я не попытаюсь добавить eventListener: 

document.getElementById("myUL").addEventListener("click", function{
    var selectLi = document.querySelectorAll("li") 
    for (var i =0; i < selectLi.length; i++){
        selectLi[i].style.textDecoration = "line-through";
        selectLi[i].style.color = "red";
    }

    }
});

Буду признателен за любую помощь!

Ответы [ 3 ]

0 голосов
/ 09 октября 2018

Вам необходимо прикрепить событие click к элементу ul и проверить, щелкает ли элемент, использующий ключевое слово event.target.

ПРИМЕЧАНИЕ: Возможно, вам потребуется предотвратитьпустые поля для отправки с использованием: 

if (item !== "") {
     //Append the 'li'
}


document.querySelector("#myUL").addEventListener("click", function(e) {
  if (e.target.tagName === 'LI') {
    e.target.style.textDecoration = "line-through";
    e.target.style.color = "red";
  }
});

function nyttElement() {
  var item = document.getElementById("myInput").value;

  if (item !== "") {
    var newItem = document.createElement("li");
    var text = document.createTextNode(item);

    newItem.appendChild(text);
    document.getElementById("myUL").appendChild(newItem);
  } else {
    console.log('Some message in the else clause about filling the empty field.')
  }
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">

  <title>Inköpslista</title>
</head>

<body>
  <h2>Inköpslista</h2>
  <div>
    <input type="text" id="myInput" placeholder="Ange vara..." />
    <button onclick="nyttElement()">Lägg till</button>
  </div>

  <ul id="myUL">
    <li>Kakor</li>
    <li>Bullar</li>
    <li style="text-decoration: line-through;">Nutella</li>
  </ul>
  <script src="lista.js"></script>
</body>

</html>
0 голосов
/ 09 октября 2018

Вам не нужно перебирать все ли.Чтобы выделить нажатие кнопки li, вы должны использовать разделение событий, как показано ниже 

function nyttElement() {
  var newItem = document.createElement("li");
  var item = document.getElementById("myInput").value;
  var text = document.createTextNode(item);
  newItem.appendChild(text);
  document.getElementById("myUL").appendChild(newItem);
}


document.getElementById("myUL").addEventListener("click", function(e) {
  // if target is li
  if (e.target && e.target.nodeName === 'LI') {
    // toggle done class
    e.target.classList.toggle('done');
  }
});
.done {
  text-decoration: line-through;
  color: red;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">

  <title>Inköpslista</title>
</head>

<body>
  <h2>Inköpslista</h2>
  <div>
    <input type="text" id="myInput" placeholder="Ange vara..." />
    <button onclick="nyttElement()">Lägg till</button>
  </div>

  <ul id="myUL">
    <li>Kakor</li>
    <li>Bullar</li>
    <li>Nutella</li>
  </ul>
  <!--<script src="lista.js"></script>-->
</body>

</html>
0 голосов
/ 09 октября 2018

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

const listItems = document.querySelectorAll('#myUL > li')

function addEventListener(li) {
  return li.addEventListener('click', function() {
    this.className = this.className == 'todo' ? 'done' : 'todo'
  });
}

function nyttElement(){
  var newItem = document.createElement('li');
  var item = document.getElementById('myInput').value;
  var text = document.createTextNode(item);
  newItem.appendChild(text);
  newItem.className = 'todo';
  addEventListener(newItem);
  document.getElementById('myUL').appendChild(newItem);
}

listItems.forEach(li => addEventListener(li))
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Inköpslista</title>
<style>
  li.todo {
    color: black;
    text-decoration: none;
  }
  li.done {
    color: red;
    text-decoration: line-through;
  }
</style>
</head>
<body>
<h2>Inköpslista</h2>
    <div>
    <input type="text" id="myInput" placeholder="Ange vara..."/>
    <button onclick="nyttElement()">Lägg till</button>
    </div>

    <ul id="myUL">
        <li class="todo">Kakor</li>
        <li class="todo">Bullar</li>
        <li class="done">Nutella</li>
     </ul>
    <script src="lista.js"></script>
  </body>
 </html>
...