Получение пользовательского ввода (числа) от входа - PullRequest
Новая
       0

Получение пользовательского ввода (числа) от входа

0 голосов
/ 29 марта 2020

Я пытаюсь сделать калькулятор цен для проекта, над которым я работаю. Пользователь должен выбрать типы билетов, которые он хочет, и количество. Затем программа рассчитывает общую стоимость.

У меня были цены на билеты, установленные в 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;
});

Ответы [ 2 ]

1 голос
/ 29 марта 2020

Есть две ошибки. Во-первых, в файле javscript нет элемента с именем adults, а во-вторых, у вас есть дублированный идентификатор adults в вашем html

  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>
1 голос
/ 29 марта 2020

Проблема здесь: 

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

Вы дублировали id="adults", поэтому let adults = document.getElementById("adults"); фактически возвращает ваш ярлык вместо ввода. Просто удалите id="adults" из <label for="adults" id="adults">Number of Adults: </label> и все должно работать нормально.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...