javascript - 按钮和 JavaScript 列表

Question

我有一个 HTML 格式的按钮列表。根据单击的按钮，应该进行 AJAX 调用并显示数据。但是 JavaScript 无法读取该按钮。这是 HTML 代码

<ul>
        <li><input type = "button" name = "lab" id = "map" value = "Computer Lab" onClick = "openPage(this)"></li>

        <li><input type = "button" name = "lib" id = "map" value = "Library" onClick = "openPage(this)"></li>

        <li><input type = "button" name = "mlib" id = "map" value = "Manuscript Library" onClick = "openPage(this)"></li>

        <li><input type = "button" name = "radio" id = "map" value = "Agra ki Aawaz" onClick = "openPage(this)"></li>
      </ul>

这是 JavaScript 代码

function openPage(page){
try {
    xmlHttp = new XMLHttpRequest ();
}
catch (e) {
    try {
        xmlHttp = new ActiveXObject ("Microsoft.XMLHTTP");
    }
    catch (el) {
        try {
            xmlHttp = new ActiveXObject ("Msxml2.XMLHTTP");
        }
        catch (el1) {
            alert ("Your browser does not support AJAX! Please use a compatible browser!!");
        }
    }
}

xmlHttp.onreadystatechange = function () {
    if (xmlHttp.readyState == 4 && xmlHttp.state == 200) {
        var sp = documet.getElementByID ("mainText");
        sp.innerHTML = xmlHttp.responseText;
    }
};

var target = "";
var parent = "";
var page = "";

switch(page.name){
case 'lab':
    target = "get_content.jsp";
    parent = "kmi";
    page = "lab";
    break;
case 'lib':
    targt = "get_content.jsp";
    parent = "kmi";
    page= "gen_lib";
    break;
case 'mlib':
    targt = "get_content.jsp";
    parent = "kmi";
    page= "man_lib";
    break;
case 'radio':
    targt = "get_content.jsp";
    parent = "kmi";
    page= "radio";
    break;
}
xmlHttp.open("POST", target, false);
xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;");
xmlHttp.send("parent=" + parent + "&page=" + page);

现在的问题是 page.name 变为 undefined。

我不明白它有什么问题，是否可以创建这样的按钮列表并使用它们进行导航？

Answer 1

就在 switch 语句上方，有以下内容:

var page = "";

因为你的函数定义如下所示:

function openPage(page){

JavaScript 删除了 var(变量已声明)，并且仅将 ""(空字符串)分配给曾经作为 DOM 元素引用的内容。解决名称冲突，您就可以上路了