How to completely separate the js code from the html file? - Codes Helper

tree / var/www/html/ajax/
/ var/www/html/ajax/
thank you getuser.php
thank you index.html

very simple logic, index.html sends data to getuser.php, through ajax, and passes the query results of the database to index.html.

has been debugged successfully.

index.html

<html>
    <head>
    </head>
    <body>
        <form> 
            Select a User:
            <select name="users" id="user">
                <option value="x1">x1</option>
                <option value="x2">x2</option>
                <option value="x3">x3</option>
            </select>
        </form>
        <input type="button" value="search" id="search">
        
        
        <div id="txtHint"><b>User info will be listed here.</b></div>
        
<script>
var xmlHttp
function showUser(){ 
    xmlHttp=GetXmlHttpObject()
    if (xmlHttp==null){
        alert ("Browser does not support HTTP Request")
        return
    }
    var mySelect = document.getElementById("user");
    var index = mySelect.selectedIndex;
    var str = mySelect.options[index].value;
    var url="getuser.php"
    url=url+"?q="+str
    url=url+"&sid="+Math.random()
    xmlHttp.onreadystatechange=stateChanged 
    xmlHttp.open("GET",url,true)
    xmlHttp.send(null)
    }

function stateChanged(){ 
    if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete"){ 
        document.getElementById("txtHint").innerHTML=xmlHttp.responseText 
    } 
}

function GetXmlHttpObject(){
    var xmlHttp=null;
    try{
        // Firefox, Opera 8.0+, Safari
        xmlHttp=new XMLHttpRequest();
    }catch (e){
        //Internet Explorer
        try{
            xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
        }catch (e){
            xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
    } 
    return xmlHttp;
}

ob = document.getElementById("search");
ob.addEventListener("click",showUser);
</script>
    </body>
</html>

getuser.php

<?php
$q=$_GET["q"];
$dsn = "mysql:host=localhost;dbname=ajax";
$con = new PDO($dsn,"root","xxxx");
$query_check = "select * from person where `FirstName`="$q" ";
$result = $con->query($query_check);
$rows = $result->fetchAll();
print_r($rows);
?>

now, I want to separate all the js code in index.html into a single js file
to form the following structure
tree / var/www/html/ajax/
/ var/www/html/ajax/
listing getuser.php
checking index.html
checking selectuser.js

selectuser.js part

var xmlHttp
function showUser(){ 
    xmlHttp=GetXmlHttpObject()
    if (xmlHttp==null){
        alert ("Browser does not support HTTP Request")
        return
    }
    var mySelect = document.getElementById("user");
    var index = mySelect.selectedIndex;
    var str = mySelect.options[index].value;
    var url="getuser.php"
    url=url+"?q="+str
    url=url+"&sid="+Math.random()
    xmlHttp.onreadystatechange=stateChanged 
    xmlHttp.open("GET",url,true)
    xmlHttp.send(null)
    }

function stateChanged(){ 
    if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete"){ 
        document.getElementById("txtHint").innerHTML=xmlHttp.responseText 
    } 
}

function GetXmlHttpObject(){
    var xmlHttp=null;
    try{
        // Firefox, Opera 8.0+, Safari
        xmlHttp=new XMLHttpRequest();
    }catch (e){
        //Internet Explorer
        try{
            xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
        }catch (e){
            xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
    } 
    return xmlHttp;
}

ob = document.getElementById("search");
ob.addEventListener("click",showUser);

is to move all the contents between < script > < / script > in index.html to selectuser.js
and find that if you do so, it will not work properly.

excuse me, what changes should be made?