Как я могу указать ограничение для добавления в мой Javascript код?

Question

Я добавил 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);

Заранее спасибо.

Answer 1

Попробуйте это

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

Я нашел другое решение

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

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

Изменить out.append(p); на out.innerHTML = p;