CODEWITHSUNDEEP
javascripthtml
Asura
Asura

Reputation: 15

Calculating multiple inputs value with javascript

i'm having trouble going trough making a calculator (sum only) of 5 inputs fields in html/javascript and i can't manage to find what's wrong in my code

i tried messing around with types such as int instead of var and passing the value into parseInt, i somehow managed to have a result like "11111" where it should be like "5" but alongside that case the result is never printed in the innerHTML even after i added the "if not null" condition

Here is my 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>

and here is my 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";
    }
}

Any clue?

Upvotes: 0

Views: 1628

Answers (3)

Joshua Aclan
Joshua Aclan

Reputation: 21

JavaScript is not a type variable language try using let or const. And here is how you properly parse it. If you did it already then its because of your variable declaration. 

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

Upvotes: 2

Amit
Amit

Reputation: 1560

In javascript you should use keyword var/let/const instead of int. and you have to convert String type input value to int using parseInt method.

Please check this:

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>

Upvotes: 0

Dimitri Lavren&#252;k
Dimitri Lavren&#252;k

Reputation: 4879

As mentioned by @Joshua Aclan, JavaScript does not have an "int" variable declaration, only "var". Also you have to cast all of the inputs to int or float, because otherwise you are adding strings and the values of input fields are always strings. Also the output is most likely empty because int designValue... produces an error.

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

Upvotes: 0

Related Questions