我如何给我的Javascript代码附加限制?

问题描述 投票:2回答:4

我附加了一个div,它从switch进行检查并打印结果,但是每次我单击按钮时,它都会不断给我结果,我想以某种方式将结果/输出限制为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);

提前感谢。

javascript append limit
4个回答
0
投票

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

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

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>

0
投票

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


0
投票

我找到了另一个解决方案

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);
© www.soinside.com 2019 - 2024. All rights reserved.