生成有关输入的弹出帮助

Question

我正在处理一个表单，我正在尝试生成帮助弹出窗口，以防用户在输入字段中填写不当。我知道字段有自己的RegEx来控制它们的有效性，所以我想在用户单击它的特定帮助按钮时生成弹出窗口。

我尝试了一个循环，但我仍然有未捕获的错误。我认为这是由于querySelector，但即使有一个getElementById我的功能。我是否使用了好的方法来创建这个事件，或者有没有什么方法可以在本地链接两个HTML元素，我是说同一个div中的两个元素？

cart.js:172 Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')
    at HTMLButtonElement.<anonymous> (cart.js:172)

这是我的JS：

let z = document.querySelectorAll(".help-popup");
    for(let i = 0; i < z.length; i++) {
        let getHelpPopUp = document.getElementById(`help-icon-${i}`);
        getHelpPopUp.addEventListener("click", (event) => {
            event.preventDefault();

            let reachPopup = document.getElementById(`popup-${i}`);
            reachPopup.classList.toggle("show-popup");
            })
    }

HTML：

<div class="label-container">
    <label class="input-label letter-label" for="nom">Nom :</label>
    <i id="help-icon-1" class="help-icon __letter-input-help far fa-question-circle"></i>
    <input class="input-entry letter-input" id="input-nom" name="nom" type="text" required>
    <span class="help-popup" id="popup-1"> Pour ce champs veillez à n'utilisez que des lettres</span>
</div>

<div class="label-container">           
    <label class="input-label letter-label" for="prenom">Prénom :</label>
    <i id=""help-icon-2" class="help-icon __letter-input-help far fa-question-circle"></i>
    <input class="input-entry letter-input" id="input-prenom" name="prenom" type="text" required>
    <span class="help-popup" id="popup-2"> Pour ce champs veillez à n'utilisez que des lettres</span>
</div>

CSS：

    .help-icon{
    font-size: 14px;
    position: relative;
    grid-area: help;
    cursor: pointer;
}

.help-popup{
    grid-area: popup;
    border: solid;
    position: absolute;
    left: 50%;
    z-index: 2;
    background-color: #555;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 0 5px;
    visibility: hidden;
    margin-left: 10px;
    max-height: 2em;
    width: max-content;
}



.help-popup::after {
    position: absolute;
    content: "";
    right: 100%;
    border-style: solid;
    border-width: 10px;
    top: 10%;
    border-color: transparent #555 transparent transparent; 
}


.show-popup{
    visibility: visible;
    animation: fadeIn 1s;
}

/*Animation Popup*/
@keyframes fadeIn {
    from {opacity: 0;}
    to {opacity:1 ;}
  }

Answer 1

您正在使用for循环的i来构造css选择器help-icon-${i}。i从零开始，help-icon-0不存在。这就是为什么它不能从null读取addEventListener，因为getHelpPopUp是null，因为找不到它。

尝试将您的循环更改为这样，这样它将从1开始：

 for(let i = 1; i <= z.length; i++) {

​

编辑：

在你的超文本标记语言"中似乎还有一个额外的队列。

<i id=""help-icon-2"它应该是<i id="help-icon-2"

更改后的外观以及稍后添加的CSS

Gif example

JSFiddle

Answer 2

您的代码查找的是从零开始的数字，而不是1。你还有一个额外的引号，它弄乱了属性，它找不到元素。

​

let z = document.querySelectorAll(".help-popup");
for (let i = 0; i < z.length; i++) {
  console.log(`help-icon-${i+1}`)
  let getHelpPopUp = document.getElementById(`help-icon-${i+1}`);
  getHelpPopUp.addEventListener("click", (event) => {
    event.preventDefault();
    let reachPopup = document.getElementById(`popup-${i+1}`);
    reachPopup.classList.toggle("show-popup");
  })
}

.help-icon {
  font-size: 14px;
  position: relative;
  grid-area: help;
  cursor: pointer;
}

.help-popup {
  grid-area: popup;
  border: solid;
  position: absolute;
  left: 50%;
  z-index: 2;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 0 5px;
  visibility: hidden;
  margin-left: 10px;
  max-height: 2em;
  width: max-content;
}

.help-popup::after {
  position: absolute;
  content: "";
  right: 100%;
  border-style: solid;
  border-width: 10px;
  top: 10%;
  border-color: transparent #555 transparent transparent;
}

.show-popup {
  visibility: visible;
  animation: fadeIn 1s;
}


/*Animation Popup*/

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet" />

<div class="label-container">
  <label class="input-label letter-label" for="nom">Nom :</label>
  <i id="help-icon-1" class="help-icon __letter-input-help far fa-question-circle"></i>
  <input class="input-entry letter-input" id="input-nom" name="nom" type="text" required>
  <span class="help-popup" id="popup-1"> Pour ce champs veillez à n'utilisez que des lettres</span>
</div>

<div class="label-container">
  <label class="input-label letter-label" for="prenom">Prénom :</label>
  <i id="help-icon-2" class="help-icon __letter-input-help far fa-question-circle"></i>
    <input class="input-entry letter-input" id="input-prenom " name="prenom" type="text " required>
    <span class="help-popup" id="popup-2"> Pour ce champs veillez à n'utilisez que des lettres</span>
</div>

​

就我个人而言，我会避免所有的循环，也不会添加一堆事件监听器。我将使用事件委托，并检查是否单击了帮助图标。如果是在父级中查找弹出窗口。

​

document.querySelector(".wrapper").addEventListener("click", function (evt) {
  const help = evt.target.closest('.help-icon');
  if (help) {
    help.closest('.label-container').querySelector('.help-popup').classList.toggle('show-popup');
  }
});

.help-icon {
  font-size: 14px;
  position: relative;
  grid-area: help;
  cursor: pointer;
}

.help-popup {
  grid-area: popup;
  border: solid;
  position: absolute;
  left: 50%;
  z-index: 2;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 0 5px;
  visibility: hidden;
  margin-left: 10px;
  max-height: 2em;
  width: max-content;
}

.help-popup::after {
  position: absolute;
  content: "";
  right: 100%;
  border-style: solid;
  border-width: 10px;
  top: 10%;
  border-color: transparent #555 transparent transparent;
}

.show-popup {
  visibility: visible;
  animation: fadeIn 1s;
}


/*Animation Popup*/

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet" />

<div class="wrapper">

  <div class="label-container">
    <label class="input-label letter-label" for="nom">Nom :</label>
    <i id="help-icon-1" class="help-icon __letter-input-help far fa-question-circle"></i>
    <input class="input-entry letter-input" id="input-nom" name="nom" type="text" required>
    <span class="help-popup" id="popup-1"> Pour ce champs veillez à n'utilisez que des lettres</span>
  </div>

  <div class="label-container">
    <label class="input-label letter-label" for="prenom">Prénom :</label>
    <i id="help-icon-2" class="help-icon __letter-input-help far fa-question-circle"></i>
    <input class="input-entry letter-input" id="input-prenom" name="prenom" type="text" required>
    <span class="help-popup" id="popup-2"> Pour ce champs veillez à n'utilisez que des lettres</span>
  </div>

</div>

​