Moving onclick into the javascript

JavaScript
1

How would I do this?
https://jsfiddle.net/w7cmthgv/46/

<div class="info">
  <input class="input" type="text" id="searchFor" name="someNameHere" />
  <input id="sent" class="sent" type="submit" value="Search" onclick="searchYT()" />
</div>


function searchYT() {
  const searchFor = document.getElementById("searchFor").value;
  window.open("https://www.youtube.com/results?search_query=" + searchFor);
}
2

You mean, how would you move the click handler into the javascript rather than having the onclick in the HTML? You’re already doing that in some of your other code bits elsewhere, but here’s what I’d do:

<!-- in your html --> 
<input id="sent" class="sent" type="submit" value="Search" />

<!-- in your js -->
let sentBtn = document.querySelector("input#sent");

function searchYT(){
  // ...your code here
}

sentBtn.addEventListener("click", searchYT);
3 
window.onclick = function(e)
    {   var id =  e.target.id;   
      if (id === 'sent')  
       { const searchFor = document.getElementById("searchFor").value;
         window.open("https://www.youtube.com/results?search_query=" + searchFor);
       }
    };
1 Like
4

If I wanted the enter key to work here also, how would I add that in?
https://jsfiddle.net/w7cmthgv/55/

(function iife() {
    "use strict";
    const sentBtn = document.querySelector("input#sent");

    function searchYT() {
        const searchFor = document.getElementById("searchFor").value;
        window.open("https://www.youtube.com/results?search_query=" + searchFor);
    }
    sentBtn.addEventListener("click", searchYT);
}());
5 
// Cache the DOM-element
const searchBtn = document.querySelector('#send');
const searchFor = document.getElementById("searchFor");

// Add eventlistener for click, pass in the function that will fire
searchBtn.addEventListener('click', searchYT);

// Click handler will fire this function
function searchYT() {
  window.open("https://www.youtube.com/results?search_query=" + searchFor.value);
}
6

Ah. So using your code, a slight change:

(function iife() {
    "use strict";
    const sentBtn = document.querySelector("input#sent");

    function searchYT() {
        const searchFor = document.getElementById("searchFor").value;
        window.open("https://www.youtube.com/results?search_query=" + searchFor);
    }

    // Any and all event listeners.
    sentBtn.addEventListener("click", searchYT);
    sentBtn.addEventListener("keyup", function(evt){
      // if the return key has been pressed...
     if(evt.which == 13){ searchYT(); }
    })
}
}());

As the if statement has a single line, it doesn’t strictly NEED the curly braces, but it won’t break it.

And yeah, after the second listener, I had forgotten to close my parenthesis.

7

There is something wrong in the code you provided:
https://jsfiddle.net/w7cmthgv/57/

8

Edited the code above. I was missing a closing paren ) after the keyup listener.

9

Pressing enter on the keyboard doesn’t work here though.

https://jsfiddle.net/w7cmthgv/60/

I’m pressing enter and nothing is happening.

10

Yeah, I’m an idjit. I put the keyup event on the button, when it should be on the text input. sigh.

(function iife() {
    "use strict";
    const sentBtn = document.querySelector("input#sent"),
          inputEl = document.querySelector("input#searchFor")

    function searchYT() {
        const searchFor = document.getElementById("searchFor").value;
        window.open("https://www.youtube.com/results?search_query=" + searchFor);
    }
    function handleKeyboard(eventObject){
      // handle the enter key...
      if(eventObject.which === 13){
        searchYT();
      }
    }
    sentBtn.addEventListener("click", searchYT);
    inputEl.addEventListener("keyup", handleKeyboard, true);
}());

Note that you don’t NEED to use a separate named function for the keyup, would work just fine inline, but it makes it a little more readable to have it in.

11

When enter is pressed this appears inside firefox.

12

Yup. You’ve got a popup-blocker on your browser. in the address bar, you may see a lock or something, and you’d want to “always allow…”

1 Like
13

I see it doesn’t happen in Chrome.

14

Something like that:

1 Like
15

But, the fact that you’re getting the popup blocker is a pretty good sign that we’re on the right path with that event listener.

1 Like
16

How would I get the search input button to use the svg instead of the text?

I wasn’t able to figure this out.
https://jsfiddle.net/w7cmthgv/130/

What I’m trying to achieve.