Enter键在单击按钮时不起作用

Question

Hi am a beginner in javascript and to programming. i just made a live conversation using html,css and javascript. I can't access the enter key in the button tag .

<script>
  function typo(){
    var currentText = document.getElementById("demo").innerHTML;
    enterkey();
    var x = '<p class=chatbox>' + document.getElementById("myText").value + '</p>';
    document.getElementById("myText").value = "";
    var y = document.getElementById("demo").innerHTML = currentText + x;
  }

  function enterkey() {
    var input = document.getElementById("myText");
    input.addEventListener("keyup", function(event) {
      event.preventDefault();
      if (event.keyCode === 13) {
        document.getElementById("btn-chat").click();
      }
    });
  }
</script>

<p id="demo"></p>
<input type="text" id="myText" value="">
<button onclick="typo()" class="btn btn-warning btn-sm" id="btn-chat">Send</button>

Answer 1

Your function enterkey() is being called. I've entered an alert in starting of the function to check if it is working. And it is alerting. Maybe what you are trying to achieve with enterkey() is not working. You need to check that.

 <script> function typo(){ var currentText = document.getElementById("demo").innerHTML; enterkey(); var x = '<p class=chatbox>' + document.getElementById("myText").value + '</p>'; document.getElementById("myText").value = ""; var y = document.getElementById("demo").innerHTML = currentText + x; } function enterkey() { alert("check here"); var input = document.getElementById("myText"); input.addEventListener("keyup", function(event) { event.preventDefault(); if (event.keyCode === 13) { document.getElementById("btn-chat").click(); } }); } </script> <p id="demo"></p> <input type="text" id="myText" value=""> <button onclick="typo()" class="btn btn-warning btn-sm" id="btn-chat">Send</button> 

Thanks

Answer 2

Enter key works only after you click on Send at least once. And you shouldn't bind a new keyup event to the text field every time Send button is clicked. You can do this instead

 <p id="demo"></p> <input type="text" id="myText" value=""> <button onclick="typo()" class="btn btn-warning btn-sm" id="btn-chat">Send</button> <script> function typo(){ var currentText = document.getElementById("demo").innerHTML; //enterkey(); var x = '<p class=chatbox>' + document.getElementById("myText").value + '</p>'; document.getElementById("myText").value = ""; var y = document.getElementById("demo").innerHTML = currentText + x; } // function enterkey() { var input = document.getElementById("myText"); input.addEventListener("keyup", function(event) { event.preventDefault(); if (event.keyCode === 13) { document.getElementById("btn-chat").click(); } }); //} </script> 

Here I place the script below HTML elements to ensure that document.getElementById("myText") returns the loaded input, and bind keyup event after that.

Answer 3

 <p id="demo"></p> <input type="text" id="myText" value=""> <button onclick="typo()" class="btn btn-warning btn-sm" id="btn-chat">Send</button> <script> function typo(){ var currentText = document.getElementById("demo").innerHTML; var x = '<p class=chatbox>' + document.getElementById("myText").value + '</p>'; document.getElementById("myText").value = ""; var y = document.getElementById("demo").innerHTML = currentText + x; } var input = document.getElementById("myText"); input.addEventListener("keyup", function(event) { event.preventDefault(); if (event.keyCode === 13) { document.getElementById("btn-chat").click(); } }); </script>