如何在我的 Javascript 代码中附加一个限制？

Question

我附加了一个 div，它从开关检查并打印结果，但每次我点击按钮时，它总是给我结果，我想以某种方式将 result/output 限制为 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);

提前致谢。

Answer 1

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

Answer 2

试试这个

<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>

Answer 3

覆盖输出结果。请参阅演示中的逐行注释。

// 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>

Answer 4

我找到了另一个解决方案

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);

如何在我的 Javascript 代码中附加一个限制？

How can I give a limit to append in my Javascript Code?

javascript

append

limit