Tengo problemas para hacer una calculadora (solo suma) de 5 campos de entrada en html / javascript y no puedo encontrar lo que está mal en mi código

Intenté jugar con tipos como int en lugar de var y pasar el valor a parseInt, de alguna manera logré tener un resultado como "11111" donde debería ser como "5", pero junto a ese caso el resultado nunca se imprime en innerHTML incluso después de agregar la condición "si no es nula"

Aquí está mi 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>

Y aquí está mi 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";
    }
}

¿Cualquier pista?

0
Asura 23 oct. 2019 a las 15:57

3 respuestas

La mejor respuesta

Como mencionó @Joshua Aclan, JavaScript no tiene una declaración de variable "int", solo "var". También debe convertir todas las entradas a int o float, porque de lo contrario está agregando cadenas y los valores de los campos de entrada siempre son cadenas. También es probable que la salida esté vacía porque int designValue... produce un 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";
    }
}
0
Dimitri L. 23 oct. 2019 a las 13:04

En javascript debe usar la palabra clave var / let / const en lugar de int. y debe convertir el valor de entrada de tipo String a int utilizando el método parseInt .

Por favor, compruebe esto:

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 oct. 2019 a las 13:04

JavaScript no es un lenguaje de tipo variable, intente usar let o const. Y así es como lo analizas correctamente. Si ya lo hizo, es por su declaración de variable.

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 oct. 2019 a las 13:11