为什么javascript 'if over‘语句看起来循环起来

Question

我正在写一些名为帐户寄存器的javascript代码。该要求是在单击“注册”按钮时显示屏幕上输入的信息，单击左侧的“删除”按钮可以删除每一行。

我的问题是，当我第一次点击注册按钮，信息没有出现。第二次没问题。从第三次开始，额外的行开始添加。对我来说，“if over”语句似乎在函数中循环。

原因是什么？

执行结果

​

var counterVal = 0;

document.getElementById("tuikaBtn").onclick = function() {
  const addButton = document.getElementById('tuikaBtn');
  const listContainer = document.getElementById('result');
  const name = document.getElementById('namae');
  const nick = document.getElementById('nickname');
  const rmvButton = document.getElementById('rmv');

  console.log('counter = ' + counterVal);

  if (name.value == "" | nick.value == "") {
    window.alert("Please input both name and nickname.");
  } else if (counterVal == 3) {
    document.getElementById("tuikaBtn").style.display = 'none';
  } else {
    //funtion to get parent item
    const handleRemove = function(e) {
      const item = e.target.closest('.item');

      //remove the listener, to avoid memory leaks.
      item.querySelector('.remove-btn').removeEventListener('click', handleRemove);
      item.parentElement.removeChild(item);
    };

    //adds text and button to list once clicked the button
    addButton.addEventListener('click', e => {
      const item = document.createElement('div');
      const paragraph = document.createElement('div');
      const remove = document.createElement('button');

      item.classList.add('item');
      paragraph.classList.add('paragraph-style');
      remove.classList.add('remove-btn');

      paragraph.textContent = name.value + ' ' + nick.value;
      remove.textContent = 'Remove';

      item.append(paragraph);
      item.append(remove);
      listContainer.append(item);

      name.value = '';
      nick.value = '';

      remove.addEventListener('click', handleRemove);
    })

    return counterVal += 1;
  }
}

.base {
  margin: 2% 7% 0;
  height: 500px;
  background: blue;
  padding: 5% 10%;
  box-shadow: 5px 9px 8px 5px rgba(0, 0, 0, 0.5);
}

input {
  width: 300px;
  height: 40px;
  font-size: large;
}

#tuikaBtn {
  background: green;
}

h1 {
  font-family: serif;
}

.form-control::placeholder {
  color: #cacaca;
  opacity: 1;
}

table {
  border-collapse: collapse;
}

th,
td {
  border: 1px solid #312929;
  padding: 5px 10px;
}

.card {
  width: 100%;
  height: 350px;
}

.back {
  padding: 30px;
  position: absolute;
  bottom: 0;
  right: 0;
}

.form-group {
  margin: 10px 0 15px 0px;
}

#result {
  font-size: 120%;
  margin: 10;
  margin: 10px 20px;
  padding: 10px 5px 20px;
  margin: 10px 5px 10px 5px;
}

.row .card {
  color: black;
}

.card {
  color: blue;
  display: block;
  position: relative;
}

#modal {
  display: none;
  margin: 1.5em auto 0;
  background-color: white;
  border: 1px solid black;
  width: 50%;
  padding: 10px 20px;
  position: fixed;
  border-radius: 5px;
}

#overLay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 120%;
  background-color: rgba(0, 0, 0, 0.75);
}

.items {
  display: flex;
}

.item {
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: 1fr 6em;
  grid-column-gap: 1em;
  margin-bottom: 0.667em;
  align-items: center;
}

.paragraph-style {
  font-style: italic;
}

<div class="base container">

  <div class="row">
    <h1>Account Register</h1>
  </div>

  <div class="row">
    <div class="card" id="card">
      <div class="card-block">
        <form id="form-area" class="form-inline" method="post">
          <div class="form-group">
            <div class="input-group">
              <input id="namae" name="namae" type="text" class="form-control" placeholder="Full Name">
            </div>
          </div>
          <div class="form-group">
            <div class="input-group">
              <input id="nickname" name="nickname" type="text" class="form-control" placeholder="Nick Name">
            </div>
          </div>

          <div class="form-group">
            <input id="tuikaBtn" type="button" name="touroku" value="Add">
          </div>
        </form>

        <div id="tuikaMoto">User Information</div>
        <div id="result"></div>
      </div>
    </div>
  </div>

</div>

<div id="overLay"></div>

​

Answer 1

只需要一个tuikaBtn.onclick。也不需要柜台

​

document.getElementById("tuikaBtn").onclick = function() {
  const listContainer = document.getElementById('result');
  const name = document.getElementById('namae');
  const nick = document.getElementById('nickname');
  const rmvButton = document.getElementById('rmv');

  if (name.value == "" || nick.value == "") {
    window.alert("Please input both name and nickname.");
  } 
  else {
    //funtion to get parent item
    const handleRemove = function(e) {
      const item = e.target.closest('.item');

      //remove the listener, to avoid memory leaks.
      item.querySelector('.remove-btn').removeEventListener('click', handleRemove);
      item.parentElement.removeChild(item);
      document.getElementById("tuikaBtn").style.display = '';
    };

    //adds text and button to list once clicked the button
   ////// addButton.addEventListener('click', e => {    /// // /no need of this 
      const item = document.createElement('div');
      const paragraph = document.createElement('div');
      const remove = document.createElement('button');

      item.classList.add('item');
      paragraph.classList.add('paragraph-style');
      remove.classList.add('remove-btn');

      paragraph.textContent = name.value + ' ' + nick.value;
      remove.textContent = 'Remove';

      item.append(paragraph);
      item.append(remove);
      listContainer.append(item);

      name.value = '';
      nick.value = '';

      remove.addEventListener('click', handleRemove);
      if(listContainer.querySelectorAll('.item').length>=3)
      {
        document.getElementById("tuikaBtn").style.display = 'none';
      }else{
        document.getElementById("tuikaBtn").style.display = '';
      }
 //////   })
  }
}

.base {
  margin: 2% 7% 0;
  height: 500px;
  background: blue;
  padding: 5% 10%;
  box-shadow: 5px 9px 8px 5px rgba(0, 0, 0, 0.5);
}

input {
  width: 300px;
  height: 40px;
  font-size: large;
}

#tuikaBtn {
  background: green;
}

h1 {
  font-family: serif;
}

.form-control::placeholder {
  color: #cacaca;
  opacity: 1;
}

table {
  border-collapse: collapse;
}

th,
td {
  border: 1px solid #312929;
  padding: 5px 10px;
}

.card {
  width: 100%;
  height: 350px;
}

.back {
  padding: 30px;
  position: absolute;
  bottom: 0;
  right: 0;
}

.form-group {
  margin: 10px 0 15px 0px;
}

#result {
  font-size: 120%;
  margin: 10;
  margin: 10px 20px;
  padding: 10px 5px 20px;
  margin: 10px 5px 10px 5px;
}

.row .card {
  color: black;
}

.card {
  color: blue;
  display: block;
  position: relative;
}

#modal {
  display: none;
  margin: 1.5em auto 0;
  background-color: white;
  border: 1px solid black;
  width: 50%;
  padding: 10px 20px;
  position: fixed;
  border-radius: 5px;
}

#overLay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 120%;
  background-color: rgba(0, 0, 0, 0.75);
}

.items {
  display: flex;
}

.item {
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: 1fr 6em;
  grid-column-gap: 1em;
  margin-bottom: 0.667em;
  align-items: center;
}

.paragraph-style {
  font-style: italic;
}

<div class="base container">

  <div class="row">
    <h1>Account Register</h1>
  </div>

  <div class="row">
    <div class="card" id="card">
      <div class="card-block">
        <form id="form-area" class="form-inline" method="post">
          <div class="form-group">
            <div class="input-group">
              <input id="namae" name="namae" type="text" class="form-control" placeholder="Full Name">
            </div>
          </div>
          <div class="form-group">
            <div class="input-group">
              <input id="nickname" name="nickname" type="text" class="form-control" placeholder="Nick Name">
            </div>
          </div>

          <div class="form-group">
            <input id="tuikaBtn" type="button" name="touroku" value="Add">
          </div>
        </form>

        <div id="tuikaMoto">User Information</div>
        <div id="result"></div>
      </div>
    </div>
  </div>

</div>

<div id="overLay"></div>

​