How to completely separate the js code from the html file?

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?

Nov.26,2021

is separated, and this js file is introduced into html to report an error.


index.html introduces selectuser.js:

<script src="selectuser.js"></script>

your two files are in the same directory, so just write them.


It's sad to change the name

@. Who knows what it means when you can't run, whether the file doesn't load, or the js error when it's loaded.
there is a good chance that you have introduced js in the wrong place, and the dom has not finished loading at this time. You can either re-check the reference location or wrap the execution code in window.onload.
he was right.

is written like this
with a defer

<html>
    <head>
    <script src="selectuser.js" defer></script>
    </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>

</body> </html>

or

<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>

</body> <script src="selectuser.js"></script> </html>
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-7bb542-8e14.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-7bb542-8e14.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?