<div class="form-example">
<label for="name">单价: </label>
<input type="number" name="unit-price" id="unitPrice" max="2" maxlength="2" placeholder="请输入" />
</div>
<div class="form-example">
<label for="number">数量: </label>
<input type="number" name="number" id="number" placeholder="请输入" />
<button id="btn">+1</button>
</div>
<div class="form-example">
<label for="number">总价: </label>
<input type="number" name="total-price" id="totalPrice" placeholder="请输入" />
</div>
<!-- <div class="form-example">
<input type="submit" value="提交" />
</div> -->
</div>
number:'',
price:'',
// 访问器属性 - 聚合属性
get total(){
if(obj.number ==='' || obj.price === ''){
return this._total
}
return obj.number * obj.price;
},
set total(v){
if(obj.price !== ''){
obj.number = v / obj.price
}
}
}
const numberDom = document.querySelector('#number')
const priceDom = document.querySelector('#unitPrice')
const totalDom = document.querySelector('#totalPrice')
function handler(){
numberDom.value = obj.number;
priceDom.value = obj.price;
totalDom.value = obj.total
}
numberDom.addEventListener("input",(e)=>{
const v = parseFloat(e.target.value)
obj.number = isNaN(v) ?'':v
handler()
})
priceDom.addEventListener("input",(e)=>{
const v = parseFloat(e.target.value)
obj.price = isNaN(v) ?'':v
handler()
})
totalDom.addEventListener("input",(e)=>{
const v = parseFloat(e.target.value)
obj.total = isNaN(v) ?'':v
handler()
})
document.querySelector('#btn').addEventListener("click",function () {
obj.number ++
handler()
});