Input that searches google

Question

I am making a extension theme for my Chromebook that searches coding sites (like this site, w3schools, ect.) How sould I make it? This is my code so far:

<html>
<head>
</head>
<body>    
<input id="input1">
<button onclick="searchGoogle()">Search Google</button>
<script>
function searchGoogle() {
        var one = document.getElementById("input1").value;
        var two = 'http://www.google.com/search?q=' + one;
        window.location = two;
    }
</script>
</body>
</html>

My code doesn't work

When it runs, this pops up:

(Image of my code running)

Is my code wrong?

Any help will be aapreciated.

EDIT

<html>
<head>
<script src="searchgoogle.js">
</script>
</head>
<body>    
<input id="input1">
<button id="link">Search Google</button>

</body>
</html>

and

document.addEventListener('DOMContentLoaded', function() {
    var link = document.getElementById('link');
    // onClick's logic below:
    link.addEventListener('click', function() {

        function searchGoogle() {
        var one = document.getElementById("input1").value;
        var two = 'https://www.google.com/search?q=' + one;
        window.location = two;
    }


    });
});

Didn't work either

So how exactly does it not work? The screenshot looks like what you'd expect that form to look like. What happens when you click the button? — JJJ, May 23 '18 at 18:32
Possible duplicate of [onClick within Chrome Extension not working](https://stackoverflow.com/questions/13591983/onclick-within-chrome-extension-not-working) — wOxxOm, May 23 '18 at 18:32
Yes, it says " Uncaught TypeError: Cannot read property 'addEventListener' of null at HTMLDocument. (searchgoogle.js:4)" — Ethan P, May 23 '18 at 18:38
And I did look at "onClick within Chrome Extension not working" — Ethan P, May 23 '18 at 18:40
Make sure you're looking at the corrrect devtools console. The popup page declared in browser_action is a separate window with its own DOM and devtools which you can open by rightclicking the popup, then clicking 'inspect' in the context menu. — wOxxOm, May 23 '18 at 18:58

score 1 · Accepted Answer · answered May 23 '18 at 18:55

You declare the function searchGoogle inside the listener function but it is never called. Try with:

document.addEventListener('DOMContentLoaded', function() {
    var link = document.getElementById('link');
    // onClick's logic below:
    link.addEventListener('click', function() {

        //there is no need to declare a new function here.

        var one = document.getElementById("input1").value;
        var two = 'https://www.google.com/search?q=' + encodeURIComponent(one);
        window.location = two;



    });
});

Input that searches google

1 Answers1