javascript - 更改表单的语言

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];
        }
    }
}