CODEWITHSUNDEEP
javascripthtml
MtnBros
MtnBros

Reputation: 55

Enter Key Will Not Function As Button

I have tried all the code I can, and Have not figured out how to make it when I click the <i>, or when I hit enter it works. I really need help. Thanks!

$('#update').click(function upd() {
	loadChannel($('#chnlname').val());
});

var input = document.getElementById("chnlname");

input.addEventListener("keyup", function(event) {
  	if (event.keyCode === 13) {
    loadChannel($('#chnlname').val());
  	}
});
<html>
  <head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  </head>
  <body>
    <div class="Search1">
		  <div class="inputWithIcon">
			  <input type="text" placeholder="Channel ID" id="chnlname" class="Input2"></input>
				<i class="fa fa-search" aria-hidden="true" id="update" onclick="upd()"></i>
		  </div>
		</div>
   </body>

Upvotes: 0

Views: 32

Answers (2)

cwgruss
cwgruss

Reputation: 1

1) Ensure that your click function is defined, and accessible when the DOM loads. It looks like your function upd(){} isn't available in a global context. Though it doesn't follow best practices, You could accomplish this by binding the click function to the window object. See Fiddle : https://jsfiddle.net/js03rq2b/42/

2) You have called upd(){} in the HTML via onclick="upd()", while also trying to add an event listener in the JavaScript. Use one of these methods, but not both.

3) Additionally, if you bind your click handler to a <button> tag instead of an <i> tag, it will respond to SPACEBAR and ENTER as well. Whenever possible, capitalize on default browser behavior by using semantic markup.

Hope that helps.

Upvotes: 0

Ercan Peker
Ercan Peker

Reputation: 1662

1- add your js code in document ready method 2- no need to specify click handler in html code, $('#update').click is sufficient.

complete code: https://codepen.io/peker-ercan/pen/xaemMr

js; 

$(document).ready(function () {

        $('#update').click(function upd() {
            loadChannel($('#chnlname').val());
        });
        function loadChannel() {
            console.log("loading channel");
        }
        var input = document.getElementById("chnlname");

        input.addEventListener("keyup", function (event) {
            if (event.keyCode === 13) {
                loadChannel($('#chnlname').val());
            }
        });
    });

html:

 <div class="Search1">
    <div class="inputWithIcon">
        <input type="text" placeholder="Channel ID" id="chnlname" class="Input2"></input>
        <i class="fa fa-search" aria-hidden="true" id="update"></i>
    </div>
</div>

Upvotes: 1

Related Questions