Почему моя форма выводит NaN?
Итак, у меня есть эта форма, в которой выполняются очень простые вычисления, и когда я отправляю ее, она возвращается в NaN.
Меня смущает то, что когда я делаю тип одной из переменных, присвоенных значению каждого ввода, он возвращает «число», и все же в результате я получаю NaN. Может ли кто-нибудь сказать мне, почему или что я делаю не так?
Вот мой HTML:
<form name = "baddiesCost">
<input type = "number" placeholder = "Total Caught" name = "goomba" id = "goomba-form">
<input type = "number" placeholder = "Total Caught" name = "bobombs" id = "bob-ombs-form">
<input type = "number" placeholder = "Total Caught" name = "cheepCheeps" id = "cheep-form">
<button id = "submitForm">Submit</button>
</form>
<h1 id = "total"></h1>
Вот мой JavaScript:
document.baddiesCost.addEventListener("submit", function(e) {
e.preventDefault();
var goombaCaught = document.baddiesCost.goomba.value * goombaCost;
var bobombsCaught = document.baddiesCost.bobombs.value * bobombsCost;
var cheepsCaught = document.baddiesCost.cheepCheeps.value * cheepCost;
var goombaCost = 5;
var bobombsCost = 7;
var cheepCost = 11;
var showTotal = document.getElementById("total");
var total = goombaCaught + bobombsCaught + cheepsCaught;
showTotal.textContent = cheepsCaught;
console.info(bobombsCaught);
console.info(typeof bobombsCaught);
})
Вы используете свои переменные *Cost до того, как присвоили им значение. Подъем переменной работает только для имени, а не для значения
Кроме того, вы вычисляете cheepsCaught путем умножения на переменную, которую вы определите позже.
Вдобавок, когда вы выполняете document.baddiesCost.goomba.value, вы получаете нить. Чтобы преобразовать в число, сделайте Number(document.baddiesCost.goomba.value)
Также не помешало бы обернуть места, где вы получаете входные значения, в parseInt() или parseFloat(), в зависимости от того, какой тип значения вы ожидаете.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Этот оператор document.baddiesCost.bobombs.value * bobombsCost; использует переменную bobombsCost, которая в настоящее время не определена.
Итак, это похоже на: document.baddiesCost.bobombs.value * undefined;, который будет NaN.
Чтобы решить эту проблему, поместите инициализацию переменной перед использованием, как в следующем коде:
document.baddiesCost.addEventListener("submit", function(e) {
e.preventDefault();
var goombaCost = 5;
var bobombsCost = 7;
var cheepCost = 11;
var goombaCaught = document.baddiesCost.goomba.value * goombaCost;
var bobombsCaught = document.baddiesCost.bobombs.value * bobombsCost;
var cheepsCaught = document.baddiesCost.cheepCheeps.value * cheepCost;
var showTotal = document.getElementById("total");
var total = goombaCaught + bobombsCaught + cheepsCaught;
showTotal.textContent = cheepsCaught;
console.info(bobombsCaught);
console.info(typeof bobombsCaught);
})
В любом случае, NaN - это числовой тип, вы можете обратиться к следующему Почта для получения дополнительных объяснений.
Вау, не могу поверить, что не видел этого. Это исправило это. Спасибо!
when I do a typeof of one of the variables assigned to the value of each input, it returns "number"это потому, чтоNaNдействительно является числом.