根据参数替换占位符

Question

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

未

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

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

网页按钮

<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="[e-mail]"
onfocus="this.placeholder = ''" onblur="this.placeholder = '[e-mail]'" />

.JS

let fname = document.getElementById("fname");   
let lname = document.getElementById("lname");   
let email = document.getElementById("email");   
const placeholders = {
sl: { fname: "Janez", lname: "Novak", email: "[e-mail]" },
en: { fname: "John", lname: "Doe", email: "[e-mail]" }, 
de: { fname: "Kommissar", lname: "Rex", email: "[e-mail]" },
it: { fname: "Julius", lname: "Cezar", email: "[e-mail]"},
hr: { fname: "Mirko", lname: "Mirkic", email: "[e-mail]"},
ru: { fname: "Joseph", lname: "Russian", email: "[e-mail]"}
}; 
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";
}
}
}

Answer 1

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

Object.keys(placeholders).includes(language)

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

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