Moving onclick into the javascript

Making a simple YouTube search button.

How would I do this?

I would want to move the onclick into the javascript part, right?

<div class="info">
  <input class="input" type="text" id="searchFor" name="someNameHere" />
  <input 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)
}

Would I be doing something like this?

<div class="info">
  <input class="input" type="text" id="searchFor" name="someNameHere" />
  <input id="sent" class="sent" type="submit" value="Search" />
</div>
(function iife() {
    "use strict";

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

Move the following lines outside the searchYT function:

const sent = document.getElementById("sent");
sent.addEventListener("click", function() { });

Something would need to go inside the empty block.

(function iife() {
    "use strict";

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

  // Something like this maybe // sent.url = value.value;
});
}());
1 Like

I’m confused on how to get it working, because it was working here:

onclick="searchYT()" In the html

But it’s not working here:
onclick="searchYT()" In the javascript.

Maybe something like this:
https://jsfiddle.net/w7cmthgv/42/


(function iife() {
  "use strict";

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

    searchFor.url = searchFor.value;
  });
}());

Along these lines:

(function iife() {
  "use strict";

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

  const searchFor = document.getElementById("searchFor");
  const sent = document.getElementById("sent");
  sent.addEventListener("click", searchYT);
}());
1 Like

I’m getting an error inside jsfiddle.

And the search input isn’t working now:

After search is pressed this appears:
[object HTMLInputElement]

Full Code

(function iife() {
    "use strict";
    const searchFor = document.getElementById("searchFor");
    const sent = document.getElementById("sent");

    function searchYT() {
        searchFor.value;
        window.open("https://www.youtube.com/results?search_query=" + searchFor);
    }
    sent.addEventListener("click", searchYT);
}());

Oops.

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

Got it, and thank you for helping.

(function iife() {
    "use strict";
    const searchFor = document.getElementById("searchFor");
    const sent = document.getElementById("sent");

    function searchYT() {
        window.open("https://www.youtube.com/results?search_query=" + searchFor.value);
    }
    sent.addEventListener("click", searchYT);
}());
1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.