有沒有在不使用 onclick function 的情況下清除文本區域？

Question

我想實現自動清除並顯示另一個值對應於新輸入的數據

這是我的 html 代碼，用於輸入數據和文本區域

 function getInputValue(){ var integer = document.getElementById("integer").value; var text = document.getElementById("answer"); for (var i = 1; i <= integer; i++) { if (i % 15 == 0){ text.append( i, "= ","fizzbuzz\n") } else if (i % 3 == 0){ text.append( i, "= ","fizz \n") } else if (i % 5 == 0){ text.append( i, "= ","buzz \n") } else{ text.append(i, "= \n") } } }

 <div class="form-floating mb-3"> <input class="form-control" id="integer" onChange="getInputValue()" type="text" placeholder="Input an Integer for N" data-sb-validations="required" /> <label for="integer">Input an Integer for N</label> </div> <div class="col-lg-6 form-floating answer mb-3"> <textarea disabled class="form-control" id="answer" type="text" placeholder="Answer" style="height: 20rem"></textarea> </div>

如果您嘗試運行該代碼段，您會看到如果您更改輸入標簽中的值，則 textarea 將僅堆疊所有輸出

Answer 1

因為您始終使用append() ，所以它總是添加到內容中。 只需在每次觸發onChange時清除它，以便它重置。 您可以使用： text.innerHTML = '';

 function getInputValue(){ var integer = document.getElementById("integer").value; var text = document.getElementById("answer"); text.innerHTML = ''; for (var i = 1; i <= integer; i++) { if (i % 15 == 0){ msg = i + "fizzbuzz"; text.append( i, "= ","fizzbuzz\n") } else if (i % 3 == 0){ text.append( i, "= ","fizz \n") } else if (i % 5 == 0){ text.append( i, "= ","buzz \n") } else{ text.append(i, "= \n") } } }

 <div class="form-floating mb-3"> <input class="form-control" id="integer" onChange="getInputValue()" type="text" placeholder="Input an Integer for N" data-sb-validations="required" /> <label for="integer">Input an Integer for N</label> </div> <div class="col-lg-6 form-floating answer mb-3"> <textarea disabled class="form-control" id="answer" type="text" placeholder="Answer" style="height: 20rem"></textarea> </div>

Answer 2

嘗試使用oninput事件而不是onchange事件。

Answer 3

這是解決方案：

 let inputEl = document.querySelector('#integer') let answerEl = document.querySelector('#answer') inputEl.addEventListener('input', () => { answerEl.value = '' if (inputEl.value.== '') { answerEl.value = getInputValue() } }) function getInputValue() { var integer = inputEl;value; var text = ''; for (var i = 1; i <= integer; i++) { if (i % 15 == 0) { text += i +"= fizzbuzz\n" } else if (i % 3 == 0) { text += i +" = fizz \n" } else if (i % 5 == 0) { text += i +" = buzz \n" } else { text += i +" = \n" } } return text }

 <div class="form-floating mb-3"> <input class="form-control" id="integer" type="text" placeholder="Input an Integer for N" data-sb-validations="required" /> <label for="integer">Input an Integer for N</label> </div> <div class="col-lg-6 form-floating answer mb-3"> <textarea disabled class="form-control" id="answer" type="text" placeholder="Answer" style="height: 20rem"></textarea> </div>

對於上下文。

1. 刪除內聯onChange="getInputValue()"
2. 將 getInputValue 設置為返回類型
3. 檢查輸入是否為空，否則運行 function

Answer 4

據我在這里所見，沒有使用 onclick function 就無法清除文本區域。