个人中心
gpt4 book ai didi

javascript - 从 from input 获取用户输入(数字)

转载 作者：行者123 更新时间：2023-11-30 23:58:09 25 4
gpt4 key购买 nike

我正在尝试为我正在从事的项目制作价格计算器。用户应该选择他们想要的门票类型和金额。然后程序计算出总成本。

我在 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>

Javascript:

    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;
});

最佳答案

有两个错误，首先，javscript 文件中没有名为 adults 的元素，其次，您的 html 中有重复的 adults id

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

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

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

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

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

  let adultFee = 10;

  let childrenFee = 5;

  let under7Fee = 2;

  let seniorFee = 7;

  totalBtn.addEventListener("click", function totalPrice() {
    let adultsInput = adults.value;
    console.log("AV=" + adultsInput);
    let childrenInput = children.value;
    console.log("CV=" + childrenInput);
    let under7Input = under7.value;
    console.log("U7V=" + under7Input);
    let seniorInput = senior.value;
    console.log("SV=" + seniorInput);
    let totalcalculation =
      adultsInput * adultFee +
      childrenInput * childrenFee +
      under7Input * under7Fee +
      seniorInput * seniorFee;

    totalcalculation;
    console.log(totalcalculation);
    para.textContent = "the total price is " + totalcalculation;
  });
    <h1>Museum Ticket Pricing Application</h1>

    <label for="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>

关于javascript - 从 from input 获取用户输入(数字)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/60918853/

25 4 0
文章推荐： javascript - 如何将ajax请求放入函数中并在需要时调用它？
文章推荐： javascript - 嵌入的 YouTube 视频会降低网络速度
文章推荐： javascript - for循环给多个变量赋值
文章推荐： javascript - 从李中移除子弹
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com