Insert click event inside one function with onkeydown event

Question

I have one function for send message if the Enter is pressed. But, I created one button for send message too, and if I call this function, the message does not send, and I added the click event.

  function inputKeyDown(event, inputBox) {
    // Submit on enter key, dis-allowing blank messages
    if (event.keyCode === 13 && inputBox.value || event.onclick && inputBox.value) {            

      // Send the user message
      Api.sendRequest(inputBox.value, context);

      // Clear input box for further messages
      inputBox.value = '';
      Common.fireEvent(inputBox, 'input');
    }
  }

I try add one click event inside this if condition and does not work, I test the button with one alert event and works fine when I click.

Check my html:

<label for="textInput" class="inputOutline">
          <input id="textInput" class="input responsive-column"
           placeholder="Type something" type="text"
           onkeydown="ConversationPanel.inputKeyDown(event, this)">

            <button class="Testbutton" onclick="ConversationPanel.inputKeyDown(event, this)">
              <i class="icon send"></i>
            </button>

 </label>

My function onkeydown works fine to send the message. But when I changed the function added one onclick event, my button doesn't work. I debugged the button with alert and work perfectly.

What am I doing wrong? Someone can help me please.

Is for send my message inside the input element. I'm using some API. My event to send works perfectly when I press enter. I just want send if user click in the button too. — Sayuri Mizuguchi
– Sayuri Mizuguchi, Commented May 19, 2017 at 18:21
<button class="Testbutton" onclick="alert('test')"> I try use the same function but does not work =\ — Sayuri Mizuguchi
– Sayuri Mizuguchi, Commented May 19, 2017 at 18:23
if by same function you mean ConversationPanel.inputKeyDown(event, this) then of course it won't work, because you need to pass input (2nd param) — d9ngle
– d9ngle, Commented May 19, 2017 at 18:25

Ja9ad335h · Accepted Answer · 2017-05-19 18:32:06Z

2

create a new function sendMessage then call it from different events like below.

var inputBox = document.getElementById('textInput');

// for input keydown
function inputKeyDown(event) {
  // Submit on enter key, dis-allowing blank messages
  if (event.keyCode === 13) {
    sendMessage();
  }
}

// for button click
function sendMessage() {
  if (inputBox.value) {
    // Send the user message
    console.log(inputBox.value);
    Api.sendRequest(inputBox.value, context);

    // Clear input box for further messages
    inputBox.value = '';
    Common.fireEvent(inputBox, 'input');
  }
}

<label for="textInput" class="inputOutline">
  <input id="textInput" class="input responsive-column"
   placeholder="Type something" type="text"
   onkeydown="inputKeyDown(event)">
  <button class="Testbutton" onclick="sendMessage()">
    <i class="icon send"></i>Send
  </button>
</label>

answered May 19, 2017 at 18:32

Ja9ad335h

5,0652 gold badges23 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Sayuri Mizuguchi Over a year ago

Hey man, your example works too, but, in this case I needed use just the function inputKeyDown() because other business rules in my application. Thanks too! +1

Alejandro García Iglesias · Accepted Answer · 2017-05-19 18:35:28Z

1

The if condition needs adjustment. In order to check if the event was a click, you need to use event.type === 'click'. Also it can be simplified a bit by checking inputBox.value just once. I modified your inputKeyDown function:

function inputKeyDown(event, inputBox) {
    // Submit on enter key, dis-allowing blank messages
    if (inputBox.value && event.keyCode === 13 || event.type === 'click') {            

      // Send the user message
      Api.sendRequest(inputBox.value, context);

      // Clear input box for further messages
      inputBox.value = '';
      Common.fireEvent(inputBox, 'input');
    }
  }

Also, you need to pass the input element as the second parameter on the onclick handler:

<label for="textInput" class="inputOutline">
          <input id="textInput" class="input responsive-column"
           placeholder="Type something" type="text"
           onkeydown="ConversationPanel.inputKeyDown(event, this)">

            <button class="Testbutton" onclick="ConversationPanel.inputKeyDown(event, document.getElementById('textInput'))">
              <i class="icon send"></i>
            </button>

 </label>

answered May 19, 2017 at 18:35

Alejandro García Iglesias

16.4k11 gold badges53 silver badges66 bronze badges

1 Comment

Sayuri Mizuguchi Over a year ago

Works perfectly! Thank u!

Collectives™ on Stack Overflow

Insert click event inside one function with onkeydown event

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related