我有一個包含三個輸入框的表單，我想做什么，因為我將在這些輸入框中輸入數字，我想在 div 區域中看到實時數學計算
function ABC() {
const first = document.querySelector('.first')
const second = document.querySelector('.second')
const third = document.querySelector('.third')
const total = document.querySelector('.math')
const ab = first * second
const cd = ab % third
const ef = ab - cd
total.innerHTML = ef
}<form>
<input class="first" type="text" value="" />
<input class="second" type="text" value="" />
<input class="third" type="text" value="" />
</form>
<div class="math" onKeyUp="ABC()">
<div>uj5u.com熱心網友回復：
您至少需要解決兩個問題：
- 要從輸入中獲取值，您需要訪問它們的
value屬性 - 沒有
keyup事件會在 a 上觸發div，將它放在元素的容器元素上input，即在form元素上。
function ABC() {
const first = document.querySelector('.first').value;
const second = document.querySelector('.second').value;
const third = document.querySelector('.third').value;
const total = document.querySelector('.math')
const ab = first * second
const cd = ab % third
const ef = ab - cd
total.innerHTML = ef
}<form onkeyup="ABC()">
<input class="first" type="text" value="" />
<input class="second" type="text" value="" />
<input class="third" type="text" value="" />
</form>
<div class="math">
<div>更好的是：
- 在代碼中附加事件偵聽器，而不是使用 HTML 屬性。
- 偵聽
input事件，當您通過背景關系選單、文本拖放或其他非鍵盤方法進行更改時，該事件也會觸發。 innerHTML當您只想輸出純文本時不要使用。- 用分號結束你的陳述。把它留給自動分號插入演算法是一個壞習慣。
- 為您的輸入元素提供一些初始值，并在頁面加載時呼叫 ABC 函式，以便計算從一開始就可以作業。
- 使用
type="number"您的輸入元素。
const form = document.querySelector("form");
form.addEventListener("input", ABC);
function ABC() {
const first = document.querySelector('.first').value;
const second = document.querySelector('.second').value;
const third = document.querySelector('.third').value;
const total = document.querySelector('.math');
const ab = first * second;
const cd = ab % third;
const ef = ab - cd;
total.textContent = ef;
}
ABC();<form>
<input class="first" type="number" value="1">
<input class="second" type="number" value="1">
<input class="third" type="number" value="1">
</form>
<div class="math">
<div>轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/311225.html
標籤：javascript html css 形式 数学
上一篇：如果選中復選框，則添加URL
下一篇：表格寬度縮小