Question

我正在使用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（）函数输出新内容。

当我测试它时，我得到原始名称输出，但更新按钮没有做任何事情。我尝试在insertNames函数中添加一个print语句，以发现函数永远不会运行。我错过了什么？任何帮助，将不胜感激。谢谢。

Answer 1

我认为这是在加载函数的时候。检查一下 Fiddle

我已将printNames调用减少到此

function printNames(){
    alert(1);
}

如果你让它在默认情况下运行onLoad它不起作用。如果您将加载时间更改为No wrap -in Body，则可以正常工作。

没有看到您的代码，但请检查您在加载与onclick相关的功能的位置。脚本底部的手动printNames（）调用将起作用，而onclick printNames（）调用则不会。

HTML按钮无法正常工作

1 个答案: