CODEWITHSUNDEEP
javascripthtmlfunctionevents
MusicGirl
MusicGirl

Reputation: 143

Using more than one event in the same element in HTML

I'm trying to fire off a function when the user clicks a button AND/IF the user presses the enter key. I'm not sure how to store two event in the same element.

 <td> <input type= "button" disabled id ="e2" value="Exercise 2" onclick ="loadQsets(2);setRadioValues(2);disableInput() ;" /></td>

How do use both a onclick event and an enter key event in the same element to fire off the same function?

Upvotes: 1

Views: 181

Answers (2)

abc123
abc123

Reputation: 18863

 <td> <input type= "button" disabled id ="e2" value="Exercise 2" onclick ="loadQsets(2);setRadioValues(2);disableInput() ;" /></td>

window.onload=function(){
  var btn = document.getElementById('e2');
  
  function handleStuff() {
    loadQsets(2); 
    setRadioValues(2);
    disableInput();
  }
  
  btn.onclick = function() { 
    handleStuff();
  };
  
  btn.onkeydown = function() {
    handleStuff();
  }
}
 <td> <input type= "button" disabled id ="e2" value="Exercise 2" /></td>

Upvotes: 0

Suren Srapyan
Suren Srapyan

Reputation: 68685

You need to handle the keydown event and put your logic there, under the if statement

See example. 13 is the key code for Enter

document.getElementById('inp').addEventListener('keydown', function(e){
  if(e.keyCode === 13){
     console.log('Enter is pressed !');
  }
});
<input id="inp">

Upvotes: 2

Related Questions