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

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

未定义“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 2

您尚未创建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 3

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

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

更改表单的语言

3 个答案:

编辑：