私はselect multiple
入力を受け取り、この選択肢のオプションに基づいてチェックボックスを生成する関数を作成しました。次に、各チェックボックスがクリックされたときに何らかのアクションを実行するようにします。関数は次のとおりです。プログラムで作成されたaddEventListenerチェックボックスが機能しない
const makeCheckboxDropdown = (input) => {
if (input.type !== "select-multiple") {
console.error("The input must be an `select multiple` type!")
return
}
input.options[0].selected = false
const header = document.getElementById('header')
const outer = document.createElement('div')
const options = input.options
for (i = 0; i < options.length; i++) {
let div = document.createElement('div')
div.classList.add('checkbox')
let label = document.createElement('label')
let cb = document.createElement('input')
cb.type = "checkbox"
cb.value = options[i].value
cb.addEventListener("change", (e) => console.log("clicked"))
label.appendChild(cb)
label.innerHTML += options[i].value
div.appendChild(label)
outer.appendChild(div)
}
header.parentNode.insertBefore(outer, header.nextSibiling)
}
すべて動作します:チェックボックスは意図したとおりに生成されます。それ以外は、チェックボックスをクリックすると何も起こりません。それはコンソール上で "クリックされた"と記録する必要がありますが、何も起こりません。不思議なことに、この同じEventListenerをブラウザのデバッグコンソールから追加すると動作します。
ここで何が起こっているか
編集:repl.itの例。
ありがとうございます!あなたの答えの中のリンクが示すように、 'label.appendChild(document.createTextNode([...]))'の 'label.innerHTML + = [...]'を変更することで解決しました。 –