你好，我是 javascript 新手，遇到了一些麻煩。我需要我的函數來獲取用戶輸入“recserv”并將其乘以所選單選按鈕的值，以及在值更改或單選按鈕更改時進行更新。更改單選按鈕似乎有效，但是當更改“recserv”值時出現錯誤。感謝您的任何幫助！<script>function yeartot(service) { var recserv = parseFloat(document.getElementById('recserv').value); document.getElementById("result").value = service*recserv;}</script><body><p>Select the frequency</p> <input onclick="yeartot(this.value)" type="radio" name="service" value="11">Monthly<br> <input onclick="yeartot(this.value)" type="radio" name="service" value="6" checked> Bi-Monthly<br><br> Recurring Service Amount <input onchange="yeartot()" id="recserv" value=0><br/><br/> Total for year <input type="text" id="result">
3 回答
瀟湘沐
TA貢獻1816條經驗 獲得超6個贊
您得到的原因NaN是因為在#recserv元素的內聯 JS 中，您在調用函數時沒有將任何值傳遞到函數中。因此，您乘以undefined它就會得到一個NaN值。
解決問題的快速方法就是讓方法本身檢索輸入的檢查值，并且無需向其傳遞任何參數。然而，這是一個快速修復，我永遠不會建議使用內聯 JS：檢查下一個示例以獲得正確的解決方案。
function yeartot() {
var recserv = +document.getElementById('recserv').value;
var checkedService = +document.querySelector('input[name="service"]:checked').value;
document.getElementById("result").value = checkedService * recserv;
}
<p>Select the frequency</p>
<input onclick="yeartot()" type="radio" name="service" value="11">Monthly<br>
<input onclick="yeartot()" type="radio" name="service" value="6" checked> Bi-Monthly<br><br> Recurring Service Amount <input onchange="yeartot()" id="recserv" value=0><br/><br/> Total for year <input type="text" id="result">
建議的解決方案：我建議您：
用于
.addEventListener監聽輸入元素的更改。您可以使用它document.querySelectorAll([selector])來選擇要將oninput事件偵聽器綁定到的輸入。回調將簡單地調用yeartot()在運行時調用
yeartot()，以便在加載文檔時獲得計算值。
function yeartot() {
var recserv = +document.getElementById('recserv').value;
var checkedService = +document.querySelector('input[name="service"]:checked').value;
document.getElementById("result").value = checkedService * recserv;
}
document.querySelectorAll('#recserv, input[name="service"]').forEach(function(el) {
el.addEventListener('change', function() {
yeartot();
});
});
// Also, might want to run the first round of computation onload
yeartot();
<p>Select the frequency</p>
<input type="radio" name="service" value="11">Monthly<br>
<input type="radio" name="service" value="6" checked> Bi-Monthly<br><br> Recurring Service Amount <input id="recserv" value=0><br/><br/> Total for year <input type="text" id="result">
皈依舞
TA貢獻1851條經驗 獲得超3個贊
簡直就是這個……
document.getElementById('my-form').addEventListener('input', function () {
this.result.textContent = parseFloat(this.recserv.value) * parseInt(this.service.value)
})
<form id="my-form" onsubmit="return false">
<p>Select the frequency</p>
<input type="radio" name="service" value="11">Monthly
<br>
<input type="radio" name="service" value="6" checked> Bi-Monthly
<br><br>
Recurring Service Amount <input name="recserv" value="0">
<br /><br />
Total for year <output name="result"></output>
</form>
-- 如果每個條目（或輸出）都有名稱，則添加表單會使事情變得更容易。
-- 使用表單元素，不需要使用任何ID，也不需要查看哪個單選按鈕被選中，直接取選擇的值 --
并且不使用change事件而是使用input事件
寶慕林4294392
TA貢獻2021條經驗 獲得超8個贊
const setup = () => {
const serviceInputs = document.querySelectorAll('input[name="service"]');
serviceInputs.forEach(e => e.addEventListener('click', yeartot));
const recserv = document.querySelector('#recserv');
recserv.addEventListener('change', yeartot);
}
const yeartot = (service) => {
const checkedInput = document.querySelector('input:checked');
const recserv = document.querySelector('#recserv');
const serviceNumber = parseFloat(checkedInput.value, 10);
const recservNumber = parseFloat(recserv.value, 10);
const result = document.querySelector('#result');
result.value = serviceNumber * recservNumber;
}
//load
window.addEventListener('load', setup);
<body>
<p>Select the frequency</p>
<input type="radio" name="service" value="11">Monthly<br>
<input type="radio" name="service" value="6" checked> Bi-Monthly<br><br>
Recurring Service Amount <input id="recserv" value="0"><br/><br/>
Total for year <input type="text" id="result">
</body>
- 3 回答
- 0 關注
- 141 瀏覽
添加回答
舉報
0/150
提交
取消