#javascript
#javascript
Вопрос:
Я создал форму для расчета цены, включая стоимость доставки, налоги и что-то в этом роде.
Почему значение NaN? Используя number inputforms, но нужно parseFloat()?
Моя калькуляция должна быть такой:
verkaufspreis = einkaufspreis versandkosten verpackungskosten gewinnmarge in % transaktionsgebuehren transaktionsgebuehren_flex in % like paypal
Для меня это выглядит очень и очень странно, но … я не понимаю.
Надеюсь, у вас все в порядке, спасибо за подсказку.
"use strict"
let einkaufspreis = document.getElementById("einkaufspreis");
let versandkosten = document.getElementById("versandkosten");
let verpackungskosten = document.getElementById("verpackungskosten");
let transaktionsgebuehren = document.getElementById("transaktionsgebuehren");
let transaktionsgebuehren_flex = document.getElementById("transaktionsgebuehren_flex");
let gewinnmarge = document.getElementById("gewinnmarge");
let verkaufspreis = 0;
const form = document.querySelector("form");
form.addEventListener("submit", e => {
e.preventDefault();
let rohkosten = parseFloat(verpackungskosten.value) parseFloat(einkaufspreis.value) parseFloat(versandkosten.value);
let preis_mit_marge = (rohkosten / 100 * parseFloat(gewinnmarge.value)) rohkosten;
let preis_mit_transaktionskosten = (preis_mit_marge / 100 * transaktionsgebuehren_flex) preis_mit_marge;
let endkunden_preis = preis_mit_transaktionskosten;
console.log(rohkosten, preis_mit_marge, preis_mit_transaktionskosten, endkunden_preis);
})
form.addEventListener("reset", e => console.log(e)); <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form>
<div class="form-group" >
<label>Einkaufspreis</label> <input id="einkaufspreis" type="number" class="form-control" name="text_name" placeholder="Placeholder Textfeld">
</div>
<div class="form-group" >
<label>Versandkosten</label> <input id="versandkosten" type="number" class="form-control" name="text_name" placeholder="Placeholder Textfeld">
</div>
<div class="form-group">
<label>Transaktionsgebühren Fest</label> <input id="transaktionsgebuehren" type="number" class="form-control" name="text_name" placeholder="Placeholder Textfeld">
</div>
<div class="form-group" >
<label>Transaktionsgebühren %</label> <input id="transaktionsgebuehren_flex" type="number" class="form-control" name="text_name" placeholder="Placeholder Textfeld">
</div>
<div class="form-group" >
<label>Verpackungskosten</label> <input id="verpackungskosten" type="number" class="form-control" name="text_name" placeholder="Placeholder Textfeld">
</div>
<div class="form-group" id="gewinnmarge">
<label>Gewinnmarge</label> <input id="gewinnmarge" type="number" class="form-control" name="text_name" placeholder="Marge">
</div>
<div class="form-group">
<input type="submit" class="btn btn-primary" name="berechnen_button" value="Berechnen">
<input type="reset" class="btn btn-primary" name="reset_button" value="Reset">
</div>
</form>
<script src="script.js" defer></script>
</body>
</html> Комментарии:
1. Неясно, какое значение равно NaN?
2. Вы пробовали регистрировать значения
<input>элементов? (Вы пробовали что- нибудь , чтобы найти проблему?)3. element.value возвращает строку
Ответ №1:
Посмотрите внимательно, вы также ошибочно присвоили идентификатор элементу div, поэтому сначала он находит этот элемент, у которого нет свойства value
<div class="form-group" id="gewinnmarge">
<input id="gewinnmarge">
также в формуле вы обращаете внимание на элемент transaktionsgebuehren_flex , а не на его значение
let preis_mit_transaktionskosten = (preis_mit_marge / 100 * transaktionsgebuehren_flex) preis_mit_marge;
Комментарии:
1. О, да. Спасибо. Значения rohkosten, preis_mit_marge теперь в порядке. Но preis_mit_transaktionskosten, endkunden_preis по-прежнему являются NaN.
2. @Gismo1337, я тоже добавил этот случай, пожалуйста, проверьте
3. @Gismo1337, все эти вещи вы могли бы легко найти самостоятельно, используя debugger или alert
4. Мне нужно проверить это более двух раз, прежде чем тратить ваше время. Спасибо. будьте в безопасности и хорошего 2021 года
Ответ №2:
Используя number inputforms, но нужно parseFloat()?
Знакомьтесь valueAsNumber . Тогда вам не понадобится parseFloat() . (Конечно, это не меняет достоверность другого ответа, поэтому сначала исправьте ошибку)
https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement
valueAsNumber
double: возвращает значение элемента, интерпретируемое как одно из следующих, в порядке:
- Значение времени
- Число
- NaN, если преобразование невозможно
(как указано в комментарии выше, value всегда является строкой)