Fatal编程技术网
  • javascript/
  • Javascript 从输入获取用户输入（编号）

Javascript 从输入获取用户输入（编号）

javascript ecmascript-6

Javascript 从输入获取用户输入（编号）,javascript,ecmascript-6,Javascript,Ecmascript 6,我想为我正在做的一个项目做一个价格计算器。用户应该选择他们想要的票证类型和数量。然后程序计算出总成本 我在JavaScript中设置了门票的价格。问题是我的代码无法识别它是从HTML上的输入元素输入的数字，因此它将NaN作为总成本输出。我猜我的函数是错的 HTML: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv

我想为我正在做的一个项目做一个价格计算器。用户应该选择他们想要的票证类型和数量。然后程序计算出总成本

我在JavaScript中设置了门票的价格。问题是我的代码无法识别它是从HTML上的输入元素输入的数字，因此它将
NaN
作为总成本输出。我猜我的函数是错的

HTML:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="">
    </head>
    <body>
        <h1>Museum Ticket Pricing Application</h1>

        <label for="adults" id="adults">Number of Adults: </label>
        <input type="number" id="adults">
        <br>
        <br>
        <label for="children" >Number of Children: </label>
        <input type="number" id="children">
        <br>
        <br>
        <label for="under7" >Number of children under 7: </label>
        <input type="number" id="childrenUnder7">
        <br>        
        <br>
        <label for="senior" >Number of Seniors: </label>
        <input type="number" id="senior">
        <br>

        <Button id="totalBtn">Total Price</Button>
        <p></p>

        <script src="app.js" async defer></script>
    </body>
</html>

    let adults = document.getElementById("adults");

    let children = document.getElementById("children");

    let under7 = document.getElementById("childrenUnder7");

    let senior = document.getElementById("senior");


    const totalBtn = document.querySelector("button");

    const para = document.querySelector("p");


    let adultFee = 10;

    let childrenFee = 5;

    let under7Fee = 2;

    let seniorFee = 7;

    totalBtn.addEventListener("click", function totalPrice() {

       let adultsInput = adults.value;

       let childrenInput = children.value;

       let under7Input = under7.value;

       let seniorInput = senior.value;

       let totalcalculation = adultsInput * adultFee + childrenInput * childrenFee + under7Input * under7Fee + seniorInput * seniorFee;

       totalcalculation;

       para.textContent = "the total price is " + totalcalculation;
});
问题在于：

<label for="adults" id="adults">Number of Adults: </label>
<input type="number" id="adults">

成人人数：
您已经复制了
id=“成人”
so
let-maintals=document.getElementById（“成人”）实际上是重新输入标签而不是输入。只需从
成人数量：
中删除
id=“成人”
，它就可以正常工作。
问题在于：


<label for="adults" id="adults">Number of Adults: </label>
<input type="number" id="adults">



成人人数：



您已经复制了
id=“成人”
so
let-maintals=document.getElementById（“成人”）实际上是重新输入标签而不是输入。只需将
id=“成人”
从
成人数量：
中删除，它应该可以正常工作。
有两个错误：第一，在javscript文件中没有名为
maintals
的元素；第二，在html中复制了
成人的id



let under7=document.getElementById（“childrenUnder7”）；
let senior=document.getElementById（“senior”）；
让totalBtn=document.querySelector（“按钮”）；
设para=document.querySelector（“p”）；
让成人=document.getElementById（“成人”）；
成人费=10；
让儿童费=5；
让低于7的费用=2；
让资历费=7；
totalBtn.addEventListener（“单击”，函数totalPrice（）{
让成人投入=成人价值；
console.log（“AV=“+adultsInput”）；
让childrenInput=children.value；
console.log（“CV=“+childrenInput”）；
设under7Input=under7.value；
console.log（“U7V=“+under7Input”）；
让seniorInput=senior.value；
console.log（“SV=“+input”）；
让我们来计算一下=
成人投入*成人费+
儿童输入*儿童费用+
7项输入*7项费用+
seniorInput*seniorFee；
总体计算；
console.log（totalcalculation）；
para.textContent=“总价为”+totalcalculation；
});

博物馆门票定价应用程序
成人人数：




儿童人数：




7岁以下儿童人数：




长者人数：


总价

有两个错误：第一，在javscript文件中没有名为
成人的元素；第二，在html中复制了
成人的id



let under7=document.getElementById（“childrenUnder7”）；
let senior=document.getElementById（“senior”）；
让totalBtn=document.querySelector（“按钮”）；
设para=document.querySelector（“p”）；
让成人=document.getElementById（“成人”）；
成人费=10；
让儿童费=5；
让低于7的费用=2；
让资历费=7；
totalBtn.addEventListener（“单击”，函数totalPrice（）{
让成人投入=成人价值；
console.log（“AV=“+adultsInput”）；
让childrenInput=children.value；
console.log（“CV=“+childrenInput”）；
设under7Input=under7.value；
console.log（“U7V=“+under7Input”）；
让seniorInput=senior.value；
console.log（“SV=“+input”）；
让我们来计算一下=
成人投入*成人费+
儿童输入*儿童费用+
7项输入*7项费用+
seniorInput*seniorFee；
总体计算；
console.log（totalcalculation）；
para.textContent=“总价为”+totalcalculation；
});

博物馆门票定价应用程序
成人人数：




儿童人数：




7岁以下儿童人数：




长者人数：


总价

使用
控制台.log（）
检查哪个输入给出了无效的数字。在公式前面添加
控制台.log（成人输入、儿童输入、7岁以下输入、老年输入）
并查看浏览器控制台上的输出使用
控制台.log（）
检查哪个输入给出了无效的数字。添加
控制台.log（成人输入、儿童输入、7下输入、老年输入）
就在您的公式前面，查看浏览器控制台上的输出帮助和欢迎来到堆栈溢出社区乐于帮助和欢迎来到堆栈溢出社区