更改表单的语言

Question

我有一个默认语言设置为英语的表单。在页面顶部，我有 4 种不同语言（英语、法语、意大利语、德语）的链接，我想要做的是，一旦用户单击其中一种语言，它就会将表单中输入标签的文本更改为特定语言。我已将语言存储在 4 个单独的文本文件中，但在我的 JavaScript 中有些东西不起作用。我个人认为这是一个语法错误，或者可能是一个我没有注意到的小编码错误。

HTML

<header>
        <ul id="languageChoice">
            <li class="rbord"><a name="deutsche" id="deutsche">Deutsche</a></li> 
            <li class="rbord"><a name="italiano" id="italiano">Italiano</a></li>
            <li class="rbord"><a name="Francais" id="francais">Francais</a></li>
            <li class="rbord"><a name="English" id="english">English</a></li>
        </ul>
    </header>
    <form method="GET" action="#" id="add1">
        <table>
            <tr><td class = "field"><label for="firstName">First Name:</label></td><td><input id="firstName" size=10 name="firstName"></td></tr>
            <tr><td class = "field"><label for="lastName">Last Name:</label></td><td><input id="lastName" size=15 name="lastName"></td></tr>
            <tr><td class = "field"><label for="address1">Address 1:</label></td><td><input id="address1" size=25 name="address1"></td></tr>
            <tr><td class = "field"><label for="address2">Address 2:</label></td><td><input id="address2" size=25 name="address2"></td></tr>
            <tr><td class = "field"><label for="city">City:</label></td><td><input id="city" size=20 name="city"></td></tr>
            <tr><td class = "field"><label for="province">Province:</label></td><td><input id="province" size=20 name="province"></td></tr>
            <tr><td class = "field"><label for="postalCode">Postal Code:</label></td><td><input id="postalCode" size=7 name="postalCode"></td></tr>
        </table>
    </form>

文本文件示例 (english.txt)

First Name:,Last Name:,Address 1:,Address 2:,City:,Province:,Postal Code:

Javascript

function init(){
var language = document.getElementsByTagName("a");

for (var i = 0, i < language.length; i++){
    language[i].onclick = processRequest;
}
}

function processRequest(e) {
evt = e || window.event;
target = evt.target || evt.srcElement;
request.onreadystatechange = displayData;
request.open('GET', target.id+".txt", true);
request.send(null);
}

function displayData() {
if (request.readyState == 4 && request.status == 200)
    var fields = request.responseText.split(",");
    var labels = document.getElementsByTagName("label");

    for (var i = 0, i < labels.length; i++){
        labels[i].innerText = fields[i];
    }
}


window.onload = init();

Answer 1

您尚未创建 ajax 请求。记得把javascript放在页面末尾，改成

var request;
function init() {
    var language = document.getElementsByTagName("a");
    for (var i = 0; i < language.length; i++) {
        language[i].onclick = processRequest;
    }
}

function processRequest(e) {
    evt = e || window.event;
    target = evt.target || evt.srcElement;
    request = new XMLHttpRequest();
    request.onreadystatechange = displayData;
    request.open('GET', target.id + ".txt", true);
    request.send(null);
}

function displayData() {
    if (request.readyState == 4 && request.status == 200) {
        var fields = request.responseText.split(",");
        var labels = document.getElementsByTagName("label");
        for (var i = 0; i < labels.length; i++) {
            labels[i].innerText = fields[i];
        }
    }
}

Answer 2

还有一个错误：Can't find variable: request。

“请求”变量未定义。

function processRequest(e) {
    evt = e || window.event;
    target = evt.target || evt.srcElement;
    var request = new XMLHttpRequest();             <<-- added this
    request.onreadystatechange = displayData(request);
    request.open('GET', target.id+".txt", true);
    request.send(null);
}

此外，您可能希望重组displayData() 函数以接受传递的request 变量并根据请求状态/状态有条件地继续。否则，fields 未定义：'undefined' is not an object (evaluating 'fields[i]')。

function displayData(request) {
    if (request.readyState == 4 && request.status == 200) {
        var fields = request.responseText.split(",");
        var labels = document.getElementsByTagName("label");

        for (var i = 0; i < labels.length; i++) {
            labels[i].innerText = fields[i];
        }
    }
}

编辑：

此外，如果您的 javascript 位于页面的 <head> 部分，请将您的 init 函数调用更改为：window.onload = init;（不带括号）。否则，init 函数将在文档加载之前立即执行。

Answer 3

如果您在上面发布的代码正是您使用的代码，请检查您的 for 循环并更正参数

for (var i = 0, i < labels.length; i++)