如何翻译占位符

我在翻译占位符时遇到问题。

<template id="dynamicTemplate">
</template>
<select id="languageSwitch">
    <option value="nl">Nederlands</option>
    <option value="en">English</option>
</select>

<input type="text" placeholder="voornaam" data-translate="homepage.voornaam" id="voornaam"  required>
<input type="text" placeholder="achternaam" id="achternaam" required>

我使用的js可以处理按钮和文本，但这个占位符我似乎无法修复。

这是js:

       //vertaling
var initialLanguage = "en";
var translations = {
    homepage: { 
voornaam: {
            "nl":"voornaam",
            "en": "First Name"
        },

这是我用于CSS的代码：

    /* vertaling test */
[data-translate] {
    visibility: hidden;
}
[data-translate][translated] {
    visibility: visible;
}

有人知道我可以把数据翻译到哪里来让代码工作吗？学校希望我使用JS翻译。

问候并感谢您阅读我的问题。