Google search not working by html and javascript

So i was working on a project where i needed to make a search box by which when a button is clicked it searches the value in the input in new tab on google so i wrote some code to make it possible.

In order to make the google search by my page i wrote the following code
Html -

<div class="search-container">
    <form>
        <img src="imgs and icons/google.png" alt="" class="g-icon">
        <input class="search" type="text" name="myInput"/>
        <button id="search-button" onclick="googleSearch()"><img src="imgs and icons/search.png" class="search-icon" alt=""></button>
    </form>
</div>

and here is javascript-

function googleSearch()
{
    var text=document.getElementsByClassName("search").value;
    var cleanQuery = text.replace(" ","+",text);
    var url='http://www.google.com/search?q='+cleanQuery;

    window.location.href=url;
}

Please tell me what mistake is there in this code and why is it not working

1. document.getElementsByClassName return is NodeList

More info: https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName

2. String.prototype.replace() only accept 2 parameters

More info: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replace

> Your code is not working due to thing number 1

function googleSearch()
    {
        var text=document.getElementsByClassName("search")[0].value;
        var cleanQuery = text.replace(" ","+");
        var url='http://www.google.com/search?q='+cleanQuery;
    
        window.location.href=url;
    }

Good afternoon!

So the first thing you should take a look at is what your var text is actually storing. getElementsByClassname returns an array of elements (HTMLCollection).

You can either index it for it's first element like so

var text=document.getElementsByClassName("search")[0].value;

// or use querySelector()

var text = document.querySelector('.search').value // only returns the first match, for an array result see querySelectorAll()

Note: querySelector('[css like string]') uses the same syntax as your css selectors so .name will look for elements with class of name and #name will look for elements with the id of name

Either way hope any of these help you out!

Edit; the replacements of whitespace characters is redundant if you only intend to use it with google, ?q=test value yields the same results as ?q=test+value or ?q=test%20value

Edit 2;
In order to open the url in a new tab/window you cannot use window.location.href, window in this case refers to your current window instance, that's why they've provided us with window.open(url, target)

target is used to indicate where the window should open to, usually _blank, see target keywords for a more detailed explanation