Блог

Главная - Вопросы по программированию - Предупреждающее сообщение не отображается функцией дублирования, когда пользователь вводит дублированные значения

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

#javascript #for-loop

#javascript #для цикла

Вопрос:

Я ломал голову, пытаясь понять, почему моя дублирующая функция не работает. Если все работает так, как должно быть, пользователь должен получать предупреждающее сообщение каждый раз, когда он / она вводит значение дважды. Я пытался использовать метод forEach, но консоль продолжала выдавать ошибки. Итак, я теперь использую старый добрый цикл for. Предупреждающее сообщение также не отображается, но, по крайней мере, консоль не выдает никаких ошибок, что, я думаю, является шагом в правильном направлении.

 var elUlList = document.getElementById("uList");
var btn = document.getElementById("btn");
const elInput = document.getElementById("input");
const footer = document.querySelector("footer");
const message = document.getElementById("message");
const elements = document.getElementsByTagName("li");
const elCounter = document.getElementById("counter");



function createListItems() {
  var inputValue = elInput.value;
  var newLi = document.createElement("li");
  var newText = document.createTextNode(inputValue);
  newLi.appendChild(newText);
  elUlList.appendChild(newLi);
  var array = Array.from(elements);
  function findDuplicates() {
    var compare = [];
    for (var i = 0; i < array.length; i  ) {
      if(!compare.includes(array[i].textContent)){
        compare.push(array[i].textContent)
      } else {
        alert("Value already entered")
      }
    }
  }


  if(inputValue === "") {
    message.innerHTML = "field can't be left empty"
  }
  inputValue = ""

  elCounter.innerHTML =  elements.length;
}

btn.addEventListener("click", createListItems, false);

elInput.addEventListener("keyup", function(e) {
  if(e.keyCode === 13) {
    e.preventDefault();
    btn.click()
  }
})

elInput.addEventListener("mouseover", emptyField, false)

function emptyField() {
  this.value = "";
}

elUlList.addEventListener("dblclick", function(e){
  var target = e.target;
  var parent = target.parentNode;
  alert("are you sure you want to remove this item from the list")
  parent.removeChild(target)
  elCounter.innerHTML =  elements.length;
});

elUlList.addEventListener("click", function(e){
  var elements = document.getElementsByTagName("li");
  var child = e.target;
  if(elements.length >= 1){
    var elCounter = document.getElementById("counter");
    for(var i = 0; i < elements.length; i  ) {
      elements[i] === child ? elements[i].classList.toggle("lineThrough"):null;
  }
}
})


var date = new Date().toLocaleDateString("en-US")

footer.innerHTML = date
console.log(date) 
 <!DOCTYPE html>
<html lang="en" dir="ltr">

  <head>
    <meta charset="utf-8">
    <title>Practise App</title>
    <link rel="stylesheet" href="index.css">
  </head>
  <body>

  <div id="message"class=""></div>
  <ul id="uList"></ul>
  <button id="btn" type="button" name="button">click here to add items</button><br>
  <input id="input" type="text" name="" value="">
  <div id="counter" class=""></div>
  <footer></footer>


    <script src="index.js" type="text/javascript"></script>
  </body>
</html>

Комментарии:

1. Вы не вызываете свой findDuplicates(); в коде.

Ответ №1:

Я нигде не вижу findDuplicates вызова. Также вы должны регулярно вызывать document.getElementsByTagName("li") каждый раз при вводе createListItems или findDuplicates для отражения изменений, внесенных вами в html (добавлены li теги).