i18n_selector map a wrong i18n value

[nonumpa]

Issue snapshot

Root cause

目前是用 select.getAttribute(selectors) 讓所有 selector 一起 query，但是回傳的元素順序是按照 dom 順序排列，跟 selector 順序無關，所以 i18n 的值沒有照著 dom 上的 selector 順序排就會對應到錯的元素。

References

html https://github.com/nics-tw/guide/blob/main/_components/form/index.md https://github.com/nics-tw/guide/blob/main/_includes/form/form-elements.html

js https://github.com/nics-tw/guide/blob/e311f88362e539ae6e9e6b82f089e0d1ff86b284/assets/js/main.js#L7

Possible solutions

1. 可以把 i18n 順序調整得跟回傳的 nodelist 一樣
2. 或是分開 query selector、更新 value

   
   const selectors = ["[for=city]", "[for=id]"];
   const i18n = {
   "[for=city]": "City of residence",
   "[for=id]": "ID type",
   };

selectors.forEach(selector => { const elements = document.querySelectorAll(selector); elements.forEach(element => { // Update the inner text with the i18n value element.textContent = i18n[selector]; }); });