HTML按钮不起作用

HTML button not functioning

本文关键字：不起作用 按钮 HTML      更新时间：2024-03-12

我正在用JavaScript做一个项目，它打印出一些从XML文件中提取的名称。我还有3个文本框和一个更新按钮，这样，如果有人在任何文本框中键入名称，他们点击按钮时都会看到更新后的名称。例如，如果我最初有：

George
Mary
John

如果用户键入Jane，它应该将输出更改为：

Jane
Mary
John

然而，当点击更新按钮时，它不会做任何事情。以下是我的3个文本框和按钮的代码：

<div id = "Names">
      <input type = "text" id = "nameOne" value = "Enter a name" onClick = "if(this.value == value){this.value = '';}" />
      <input type = "text" id="nameTwo" value = "Enter a name" onClick = "if(this.value == value){this.value = '';}" />
      <input type ="text" id = "nameThree" value = "Enter a name" onClick = "if(this.value == value){this.value = '';}" />
      <input type = "button" id = "btnUpdate" value = "Update Names" onClick = "printNames()" /></div>

以下是我正在使用的功能：

     function getXML(){
       if(window.XMLHttpRequest){
       xmlhttp = new XMLHttpRequest();
      }
     else{
       xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
     }
       xmlhttp.open("GET","Names.xml",false);
       xmlhttp.send();
       return(xmlhttp.responseXML);
    }
function printNames() {
    var xml = getXML();
    var txt = "";
    $(xml).find("person").each(function () {
        txt += "<div>" + $(this).text() + "</div>";
    });
    $("body").append(txt);
    insertNames(name1, name2, name3);
}
function insertNames(name1, name2, name3) {
    var xmlRequest = getXML();
    var nameOneTxt = document.getElementById('nameOne').value;
    var nameTwoTxt = document.getElementById('nameTwo').value;
    var nameThreeTxt = document.getElementById('nameThree').value;
    if (nameOneTxt != null || nameTwoTxt != null || nameThreeTxt != null) {
        var x = xmlRequest.getElementsByTagName("person")[0].childNodes[0];
        x.nodeValue = nameOneTxt;
        var y = xmlRequest.getElementsByTagName("person")[0].childNodes[1];
        y.nodeValue = nameTwoTxt;
        var z = xmlRequest.getElementsByTagName("person")[0].childNodes[2];
        z.nodeValue = nameThreeTxt;
    }
    printNames();
}
printNames();
</script>

printNames（）函数从XML文件中读取名称，并使用jQuery输出这些名称。然后它调用insertNames（）函数，该函数接受3个参数（对于我的三个文本框）

insertNames函数打开一个XML连接，然后获取每个文本框的值。如果文本框不为null，那么这意味着用户输入了一个值，在这种情况下，将调用XML标记，并根据用户输入更新现有内容。然后它调用printNames（）函数，该函数输出新内容。

当我测试这个时，我得到了原始名称的输出，但更新按钮没有任何作用。我尝试将print语句添加到insertNames函数中，发现该函数从未运行过。我错过了什么？如有任何帮助，我们将不胜感激。谢谢

我认为是在加载函数的时候。检查这个不停摆弄

我已将您的printNames调用减少到此

function printNames(){
    alert(1);
}

如果让它在默认的onLoad下运行，它就不起作用。如果将加载时间更改为"无包裹体"，效果会很好。

还没有看到您的代码，但请检查您在哪里加载与onclick相关的函数。脚本底部的手动printNames（）调用将起作用，而onclick printNames）调用则不起作用。

相关文章：