如何限制在我的 Javascript 代码中附加？答案

【问题标题】：How can I give a limit to append in my Javascript Code?如何限制在我的 Javascript 代码中附加？
【发布时间】：2020-07-28 11:40:39
【问题描述】：

我添加了一个 div，它从开关检查并打印结果，但每次我点击按钮时，它总是给我结果，我想以某种方式将结果/输出限制为 1，只有这里是我的 html 代码：

<input type="text" id="input" placeholder="Name">
<button type="button" id="check_btn">Check</button>
<div id="output"></div>`

这是我的 javascript 代码：

var handle = function () {
    var check = document.getElementById('input').value;
    var out = document.getElementById('output');
    var p = document.createElement("p");


    switch(check) {
        case "Rifat":
            p.innerHTML = "check is Rifat";
            break;
        case "Sakib": 
            p.innerHTML = "Check is Sakib";
            break;
        default:
            p.innerHTML = "Check Default !";
            break;
    }
    out.append(p);

}

document.getElementById('check_btn').addEventListener("click", handle);

提前致谢。

【问题讨论】：

out.innerHTML = ''; out.append(p);
在添加新段落之前删除旧元素？

标签： javascript append limit

【解决方案1】：

我找到了另一个解决方案

var handle = function () {
    var check = document.getElementById('input').value;
    switch(check) {
        case "Rifat":
            p.innerHTML = "check is Rifat";
            break;
        case "Sakib": 
            p.innerHTML = "Check is Sakib";
            break;
        default:
            p.innerHTML = "Check Default !";
            break;
    }
}
var out = document.getElementById('output');
var p = document.createElement("p");
out.append(p);
document.getElementById('check_btn').addEventListener("click", handle);

【讨论】：

【解决方案2】：

覆盖输出结果。查看演示中的逐行 cmets。

// Register the change event to the <form>
document.forms.main.onchange = handler;

// Pass the event object
function handler(event) {

  /*
  - "this" is the <form>
  - `field` is a NodeList of all inputs, outputs, 
     buttons, etc... 
  */
  const field = this.elements;

  /*
  event.target is always the tag that the user interacted
  with.
  */
  const interacted = event.target;

  /*
  In this case event.target is <input> because the of the
  "change" event and the if condition only accepts 
  <input> or nothing.
  */
  if (interacted.id === 'input') {

    // Get the value of <input>
    let check = interacted.value;

    /*
    - Determine result from switch outcome
    - Note: the value is converted to lower case. It's just
      better UX not to get user fusterated over trivial 
      crap
    - The reply is directly overwitten to the <output> so
      it doesn't pile up on the <output>
    */
    switch (check.toLowerCase()) {
      case "rifat":
        field.output.innerHTML = "Rifat is checked.";
        break;
      case "sakib":
        field.output.innerHTML = "Sakib is checked.";
        break;
      default:
        field.output.innerHTML = "Nothing is checked.";
        break;
    }
  }
}

:root,
body {
  font: 400 3vw/1.5 Consolas;
}

input,
button,
output {
  font: inherit;
}

#output {
  color: tomato
}

<form id='main'>
  <input id="input" placeholder="Name" type="text">
  <button id="check" type="button">Check</button><br>
  <output id="output"></output>
</form>

【讨论】：

【解决方案3】：

试试这个

<input type="text" id="input" placeholder="Name">
  <button type="button" id="check_btn">Check</button>
    <div id="output"></div>
      <p id='para'></p>

 <script>
   var handle = function () {
   var check = document.getElementById('input').value;
   var out = document.getElementById('output');
   var p = document.getElementById("para");


   switch(check) {
    case "Rifat":
        p.innerHTML = "check is Rifat";
        break;
    case "Sakib": 
        p.innerHTML = "Check is Sakib";
        break;
    default:
        p.innerHTML = "Check Default !";
        break;
    }
  }

  document.getElementById('check_btn').addEventListener("click", handle);

  </script>

【讨论】：

【解决方案4】：

将out.append(p); 更改为out.innerHTML = p;

【讨论】：