element.innerHTML 不是 function 和具有 object 值的選項

Question

嗨，我正在嘗試在 javascript 中執行以下操作，基本上，我有一個輸入，我將從數組中獲取輸入文本，並且我需要每個選項都有一個 object 作為值，這樣我就可以使用我的 ZA8CFDE6331BD59EB66AC96F8911 的一些屬性

 const data = [ { name: "SIMPLES NACIONAL – MEI", funcionarioIncrease: 49.99, socioIncrease: 0, FATURAMENTO: [ { name: "ATÉ 30.000,00", value: 49.99, }, { name: "De 30.001,00 a 50.000,00 ", value: 99.99, }, ], }, { name: "SIMPLES NACIONAL – SERVIÇOS", funcionarioIncrease: 25, socioIncrease: 25, FATURAMENTO: [ { name: "ATÉ 30.000,00", value: 149.99, }, { name: "De 30.001,00 a 50.000,00 ", value: 199.99, }, ], }, ]; const Modes = () => { if (data instanceof Array) { return data.map((value) => { return { name: value.name, funcionarioIncrease: value.funcionarioIncrease, socioIncrease: value.socioIncrease, faturamento: value.FATURAMENTO, }; }); } else { return null; } }; let results = function () { const modes = Modes(); let selectHeader = document.querySelectorAll(".select__header"); let selectItem = document.querySelectorAll(".select__item"); modes.map((value) => { let element = document.createElement("div"); element.classList.add("select__item"); element.innerHTML(value.name); }); selectHeader.forEach((item) => { item.addEventListener("click", selectToggle); }); selectItem.forEach((item) => { item.addEventListener("click", selectChoose); }); function selectToggle() { this.parentElement.classList.toggle("is-active"); } function selectChoose() { let text = this.innerText, select = this.closest(".select"), currentText = select.querySelector(".select__current"); currentText.innerText = text; select.classList.remove("is-active"); } }; results();

 .select { position: relative; width: 100%; }.select.is-active.select__body { display: block; }.select__header { border: 1px solid #ccc; cursor: pointer; display: flex; }.select__current { font-size: 18px; line-height: 24px; padding: 8px; }.select__icon { align-items: center; display: flex; flex-shrink: 0; justify-content: center; height: 40px; margin-left: auto; text-align: center; width: 40px; }.select__body { border: 1px solid #cccccc; border-top: 0; display: none; left: 0; position: absolute; right: 0; top: 100%; }.select__item { cursor: pointer; font-size: 16px; line-height: 24px; padding: 8px; }.select__item:hover { background-color: #f2f2f2; }

 <div class="service_mode flex"> <div class="select is-active"> <div class="select__header"> <span class="select__current">Value 1</span> <div class="select__icon">&times;</div> </div> <div class="select__body"></div> </div> </div>

for some reason, I am not able to map my array and add its inner HTML as the attribute name of my object and I am also not finding a way to link the option to that object.

Answer 1

正如它所說element.innerHTML is not a function 。 而不是element.innerHTML(value.name); , 寫element.innerHTML = value.name;

所以你的代碼看起來像：

modes.map((value) => {
    let element = document.createElement("div");
    element.classList.add("select__item");
    element.innerHTML = value.name;
});

Answer 2

在下面試試這個：

element.innerHTML = value.name;