0

我正在尝试使函数根据所选语言用另一个占位符替换当前占位符。我目前收到此错误：

未捕获的类型错误：无法读取未定义的属性“fname”

如果我可以提供任何其他信息，请告诉我。

HTML 按钮

<input type="button" value="setInputs SI" onclick="setInputs('si')">
<input type="button" value="setInputs AN" onclick="setInputs('an')">
<input type="button" value="setInputs DE" onclick="setInputs('de')">
<input type="button" value="setInputs IT" onclick="setInputs('it')">
<input type="button" value="setInputs HR" onclick="setInputs('hr')">
<input type="button" value="setInputs RU" onclick="setInputs('ru')">

HTML 表单 - 占位符

<input type="text" name="fname" id="fname" required maxlength="50" minlength="1" placeholder="Janez" 
onfocus="this.placeholder = ''" onblur="this.placeholder = 'Janez'" /><br />
<input type="text" name="lname" id="lname" required maxlength="50" minlength="1" placeholder="Novak" 
onfocus="this.placeholder = ''" onblur="this.placeholder = 'Novak'" /><br />
<input type="email" name="email" id="email" autofocus="autofocus" required placeholder="moj@email.com"
onfocus="this.placeholder = ''" onblur="this.placeholder = 'moj@email.com'" />

JS

let fname = document.getElementById("fname");   
let lname = document.getElementById("lname");   
let email = document.getElementById("email");   

const placeholders = {
    sl: { fname: "Janez", lname: "Novak", email: "moj@email.si" },
    en: { fname: "John", lname: "Doe", email: "my@email.us" }, 
    de: { fname: "Kommissar", lname: "Rex", email: "mein@email.deu" },
    it: { fname: "Julius", lname: "Cezar", email: "barilla@email.it"},
    hr: { fname: "Mirko", lname: "Mirkic", email: "moj@email.hr"},
    ru: { fname: "Joseph", lname: "Russian", email: "moji@email.ru"}
}; 

function setInputs(language) {
    if (language) {
        const values = placeholders[language];
        fname.setAttribute("placeholder", values.fname);
        lname.setAttribute("placeholder", values.lname);
        email.setAttribute("placeholder", values.email);
    }
}

编辑

我试图从这个“逆向工程” JS 函数。

const lngs = document.getElementsByClassName("lng");

function setLanguage() {
    for (var i = 0; i < lngs.length; i++) {
        if (lngs[i].className.includes(languageFistTwo)){
            lngs[i].style.display = "inline";
        } else {
            lngs[i].style.display = "none";
        }
    }
}
4

1 回答 1

1

如果我正确理解您想要实现的目标，您需要在占位符对象中搜索语言。您可以像这样检查对象的键：

Object.keys(placeholders).includes(language)

顺便说一句，您在代码中使用的 className 通常在 React 中使用，并且与元素的 CSS 类有关，与您的占位符对象无关...

检查以下代码笔以查看实时运行的代码：https ://codepen.io/loic_baron/pen/povGZZw

于 2020-01-23T15:24:05.430 回答