Saya mengalami kesulitan dalam membuat kalkulator (jumlah saja) dari 5 bidang input dalam html/javascript dan saya tidak dapat menemukan apa yang salah dalam kode saya

Saya mencoba bermain-main dengan tipe seperti int alih-alih var dan meneruskan nilainya ke parseInt, saya entah bagaimana berhasil mendapatkan hasil seperti "11111" di mana seharusnya seperti "5" tetapi di samping itu hasilnya tidak pernah dicetak di innerHTML bahkan setelah saya menambahkan kondisi "jika tidak nol"

Ini html saya

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

Dan inilah javascript saya

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

Ada petunjuk?

0
Asura 23 Oktober 2019, 15:57

3 jawaban

Jawaban Terbaik

Seperti yang disebutkan oleh @Joshua Aclan, JavaScript tidak memiliki deklarasi variabel "int", hanya "var". Anda juga harus memasukkan semua input ke int atau float, karena jika tidak, Anda menambahkan string dan nilai bidang input selalu berupa string. Juga output kemungkinan besar kosong karena int designValue... menghasilkan kesalahan.

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 Oktober 2019, 13:04

JavaScript bukan bahasa variabel tipe coba gunakan let atau const. Dan inilah cara Anda menguraikannya dengan benar. Jika Anda sudah melakukannya maka itu karena deklarasi variabel Anda.

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 Oktober 2019, 13:11

Dalam javascript Anda harus menggunakan kata kunci var/let/const alih-alih int. dan Anda harus mengonversi nilai input tipe String ke int menggunakan metode parseInt.

Silakan periksa ini:

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 Oktober 2019, 13:04