数字输入表单的值不是数字

Question

我创建了一个表格来计算价格，包括运费、税金等。

为什么值为 NaN？ 使用数字输入表单但需要 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>

Answer 1

仔细看，你也误将 id 分配给了 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;

Answer 2

使用数字输入表单但需要 parseFloat()？

满足valueAsNumber 。 那么你就不需要parseFloat() 。 （当然这不会改变另一个答案的有效性，所以先修复错误）

https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement

valueAsNumber
double：按顺序返回元素的值，解释为下列之一：

时间价值

一个号码

如果无法进行转换，则为 NaN

（正如上面的评论指出， value始终是一个字符串）

数字输入表单的值不是数字

问题描述

2 个解决方案

解决方案1
1 已采纳 2021-01-02 15:22:08

解决方案2
0 2021-01-02 16:26:49

数字输入表单的值不是数字

问题描述

2 个解决方案

解决方案1 1 已采纳 2021-01-02 15:22:08

解决方案2 0 2021-01-02 16:26:49

解决方案1
1 已采纳 2021-01-02 15:22:08

解决方案2
0 2021-01-02 16:26:49