如何在 js 中捕獲創建的輸入的值

Question

我為每個選項創建了一個輸入字段，我需要捕獲用戶輸入的值以執行一些計算&不確定創建的輸入是否與所選選項相關？ 這是 class 中稱為“葯物”的方法

<select id="drugname" name="drugname" required>
      <option value="" selected ></option>
      <option value="v1"  >v1</option>
      <option value="v2" >v2</option>
      <option value="v3" >v3</option>
    </select>
chooseOption(){
    const arr = Array.from(document.getElementById('drugname').selectedOptions)
    arr.forEach(option=>{
        if(this.selected.includes(option.value) || option.value== '') return
        this.selected.push(option.value)
        const label= document.createElement('label')
        const input= document.createElement('input')
            input.setAttribute("type", "number")
            input.id= option.value
            label.setAttribute= ("for","drugname")
            label.innerText= option.value
            document.getElementById('test').append(label)
            document.getElementById('test').append(input)
        return this.selected
    
    })}
const selectit= document.querySelector('#drugname')
selectit.addEventListener('change',()=>{
    Drugs.chooseOption()

Answer 1

由於它不是多選，因此您不需要使用selectedOptions 。 只需使用selectit.value即可獲取當前值。

為了使用this來引用屬性，您應該在Drugs class 的實例上調用chooseOption()方法，而不是 class 本身。

 class Drugs { constructor() { this.selected = []; } chooseOption() { let value = selectit.value; if (value == '') { return; } if (this.selected.includes(value)) { return; } this.selected.push(value); const label = document.createElement('label') const input = document.createElement('input') input.setAttribute("type", "number") input.id = value label.setAttribute = ("for", "drugname") label.innerText = value document.getElementById('test').append(label) document.getElementById('test').append(input) } } const selectit = document.querySelector('#drugname'); const drug = new Drugs(); selectit.addEventListener('change', () => { drug.chooseOption() });

 <select id="drugname" name="drugname" required data-selected='[]'> <option value="" selected></option> <option value="v1">v1</option> <option value="v2">v2</option> <option value="v3">v3</option> </select> <div id="test"></div>