Javascript onclick无法正常工作，我什么都没得到

I am trying to change the select query onclick of the button.

The table name, and field names in the table are equal to the fragment after page = (About, ContactInformation)

I'm not getting any error nor getting any result.

Index page code:

function selectQuery(str) {
    if (str == "") {
        document.getElementById("editor").innerHTML = "";
        return;
    } else { 
        if (window.XMLHttpRequest) {
            // code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp = new XMLHttpRequest();
        } else {
            // code for IE6, IE5
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange = function() {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                document.getElementById("editor").innerHTML = xmlhttp.responseText;
            }
        }
        xmlhttp.open("GET","queries.php?page="+str,true);
        xmlhttp.send();
    }
}

<ul>
  <li><a href="?page=About" value="About" onclick="selectQuery(this.value)">
    <i class="fa fa-file-text"></i>&nbsp;&nbsp;About us</a>
  </li>
  <li><a href="?page=ContactInformation" onchange="selectQuery()">
    <i class="fa fa-list-alt"></i>&nbsp;&nbsp;Contact us</a>
  </li>
</ul>

queries.php page (I can't seem to get the value of $page):

<?php
    $page = intval($_GET['page']);    
    echo $page;    
?>

What am I doing wrong?

It works. Add return false and replace href with # index.php

<script>
function selectQuery(str) {
    if (str == "") {
        document.getElementById("editor").innerHTML = "";
        return;
    } else { 
        if (window.XMLHttpRequest) {
            // code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp = new XMLHttpRequest();
        } else {
            // code for IE6, IE5
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange = function() {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                document.getElementById("editor").innerHTML = xmlhttp.responseText;
            }
        }
        xmlhttp.open("GET","queries.php?page="+str,true);
        xmlhttp.send();
    }
}
</script>

<ul>
  <li><a href="#"  onclick="selectQuery('3'); return false;"><i class="fa fa-file-text"></i>&nbsp;&nbsp;About us</a></li>
  <li><a href="?page=ContactInformation" onchange="selectQuery()"><i class="fa fa-list-alt"></i>&nbsp;&nbsp;Contact us</a></li>
</ul>
<p id="editor"></p>

queries.php

<?php
if (isset($_GET['page'])) {
    echo $_GET['page'];
    }
?>

you can not use value for anchor tag because it is not defined for anchor tag,you have to pass string inside it or construct the string dynamically on click of your anchor tag.currently for you this.value will give undefined,and use return false,and # in href.

try like this:

<script>
function selectQuery(str) {
    if (str == "") {
        document.getElementById("editor").innerHTML = "";
        return;
    } else { 
        if (window.XMLHttpRequest) {
            // code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp = new XMLHttpRequest();
        } else {
            // code for IE6, IE5
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange = function() {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                document.getElementById("editor").innerHTML = xmlhttp.responseText;
            }
        }
        xmlhttp.open("GET","submit.php?page="+str,true);
        xmlhttp.send();
    }
}
</script>

<ul>
  <li><a href="#" onclick="selectQuery('About');return false;"><i class="fa fa-file-text"></i>&nbsp;&nbsp;About us</a></li>
  <li><a href="?page=ContactInformation" onchange="selectQuery(this.value)"><i class="fa fa-list-alt"></i>&nbsp;&nbsp;Contact us</a></li>
</ul>

<p id="editor"></p>

You can do it like that:

function selectQuery(obj) {
        var value = obj.getAttribute('data-value');
        
        if (value == "") {
            document.getElementById("editor").innerHTML = "";
            return;
        } else { 
            if (window.XMLHttpRequest) {
                // code for IE7+, Firefox, Chrome, Opera, Safari
                xmlhttp = new XMLHttpRequest();
            } else {
                // code for IE6, IE5
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
            xmlhttp.onreadystatechange = function() {
                if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                    document.getElementById("editor").innerHTML = xmlhttp.responseText;
                }
            }
            xmlhttp.open("GET","queries.php?page="+value,true);
            xmlhttp.send();
            return false;
        }
    }

<ul>
  <li>
    <a href="?page=About" data-value="About" onclick="return selectQuery(this);"><i class="fa fa-file-text"></i>&nbsp;&nbsp;About us</a>
  </li>
</ul>
<div id="editor"></div>

do not use value on a. set a data-attribute or use the value directly in the onclick function

</div>