Расчет значения нескольких входов с помощью JavaScript

Question

У меня проблемы с созданием калькулятора (только сумма) из 5 полей ввода в html / javascript, и я не могу найти, что не так в моем коде

Я попытался возиться с такими типами, как int вместо var и передать значение в parseInt, мне каким-то образом удалось получить результат, подобный «11111», где он должен быть как «5», но в этом случае результат никогда не печатался во innerHTML даже после того, как я добавил условие «если не ноль»

Вот мой HTML

    <body>
        <h1 class="head-title"></h1>
        <div class="input-group">
            <label for="design">Design :</label>
            <input class="input-text" type="number" id="design">
        </div>
        <div class="input-group">
            <label for="plot">Plot :</label>
            <input class="input-text" type="number" id="plot">
        </div>
        <div class="input-group">
            <label for="character">Character :</label>
            <input class="input-text" type="number" id="character">
        </div>
        <div class="input-group">
            <label for="enjoyment">Enjoyment :</label>
            <input class="input-text" type="number" id="enjoyment">
        </div>
        <div class="input-group">
            <label for="music">Music :</label>
            <input class="input-text" type="number" id="music">
        </div>
        <div class="button-group">
            <button class="button-primary" onclick="ratingCompute();">Calculate</button>
        </div>
        <div class="input-group">
            <label for="total">Rating :</label>
            <p class="rating-score" id="total"></p>
        </div>
    </body>

И вот мой JavaScript

function ratingCompute()
{
    var designValue = document.getElementById("design").value;
    var plotValue = document.getElementById("plot").value;
    var charValue = document.getElementById("character").value;
    var enjoyValue = document.getElementById("enjoyment").value;
    var musicValue = document.getElementById("music").value;
    var totalValue = designValue + plotValue + charValue + enjoyValue + musicValue;

    if (totalValue != null)
    {
        document.getElementById("total").innerHTML = totalValue + "/10";
    }
    else
    {
        document.getElementById("total").innerHTML = "0/10";
    }
}

Любая подсказка?

javascript html

0

Asura 23 Окт 2019 в 15:57

Answer 1

Как упомянул @Joshua Aclan, JavaScript не имеет объявления переменной «int», только «var». Также вы должны привести все входные данные к int или float, потому что в противном случае вы добавляете строки, а значения полей ввода всегда являются строками. Также вывод скорее всего пуст, потому что int designValue... выдает ошибку.

function ratingCompute()
{
    var designValue = parseInt(document.getElementById("design").value);
    var plotValue = parseInt(document.getElementById("plot").value);
    var charValue = parseInt(document.getElementById("character").value);
    var enjoyValue = parseInt(document.getElementById("enjoyment").value);
    var musicValue = parseInt(document.getElementById("music").value);
    var totalValue = designValue + plotValue + charValue + enjoyValue + musicValue;

    if (totalValue != null)
    {
        document.getElementById("total").innerHTML = totalValue + "/10";
    }
    else
    {
        document.getElementById("total").innerHTML = "0/10";
    }
}

0

Dimitri L. 23 Окт 2019 в 13:04

Answer 2

В javascript вы должны использовать ключевое слово var / let / const вместо int. и вам нужно конвертировать входное значение типа String в int, используя метод parseInt .

Пожалуйста, проверьте это:

function ratingCompute()
{
    var designValue = parseInt(document.getElementById("design").value);
    var plotValue = parseInt(document.getElementById("plot").value);
    var charValue = parseInt(document.getElementById("character").value);
    var enjoyValue = parseInt(document.getElementById("enjoyment").value);
    var musicValue = parseInt(document.getElementById("music").value);
    var totalValue = designValue + plotValue + charValue + enjoyValue + musicValue;

    if (totalValue)
    {
        document.getElementById("total").innerHTML = totalValue + "/10";
    }
    else
    {
        document.getElementById("total").innerHTML = "0/10";
    }
}

<body>
        <h1 class="head-title"></h1>
        <div class="input-group">
            <label for="design">Design :</label>
            <input class="input-text" type="number" id="design">
        </div>
        <div class="input-group">
            <label for="plot">Plot :</label>
            <input class="input-text" type="number" id="plot">
        </div>
        <div class="input-group">
            <label for="character">Character :</label>
            <input class="input-text" type="number" id="character">
        </div>
        <div class="input-group">
            <label for="enjoyment">Enjoyment :</label>
            <input class="input-text" type="number" id="enjoyment">
        </div>
        <div class="input-group">
            <label for="music">Music :</label>
            <input class="input-text" type="number" id="music">
        </div>
        <div class="button-group">
            <button class="button-primary" onclick="ratingCompute()">Calculate</button>
        </div>
        <div class="input-group">
            <label for="total">Rating :</label>
            <p class="rating-score" id="total"></p>
        </div>
    </body>

1

Amit 23 Окт 2019 в 13:04

Answer 3

JavaScript не является языком переменной типа, попробуйте использовать let или const. И вот как вы правильно разбираете это. Если вы уже сделали это, то это из-за объявления вашей переменной.

let designValue = parseInt(document.getElementById("design").value);
let plotValue = parseInt(document.getElementById("plot").value);
let charValue = parseInt(document.getElementById("character").value);
let enjoyValue = parseInt(document.getElementById("enjoyment").value);
let musicValue = parseInt(document.getElementById("music").value);

2

Joshua Aclan 23 Окт 2019 в 13:11

Расчет значения нескольких входов с помощью JavaScript

3 ответа

Похожие вопросы

Новые вопросы

javascript