JS中的簡單計算器

Question

我用純JS創建了一個簡單的Web應用程序，通常我遇到了一些我不知道如何解決的問題。 首先，您可以在這里看到我的演示工具： http : //codepen.io/testerius/pen/EaOPEY

function calculator() {

/* 
    SPEARMAN
    this code below is for Spearman unit
*/

// resource requirements
var spearmanWood = 50;
var spearmanClay = 30;
var spearmanIron = 20;

var spearman = document.getElementById("spearman").value;

// calculate
var spearmanAmount = spearman;
var spearmanWood = spearmanWood * parseInt(spearman);
var spearmanClay = spearmanClay * parseInt(spearman);
var spearmanIron = spearmanIron * parseInt(spearman);
var spearmanProvisions = spearman;
var spearmanTime = spearman * 136; // seconds

// calculate time
var totalSec = spearmanTime;
var hours   = Math.floor(totalSec / 3600);
var minutes = Math.floor((totalSec - (hours * 3600)) / 60);
var seconds = totalSec - (hours * 3600) - (minutes * 60);
var spearmanTime = (hours<10 ? "0" + hours : hours) + ":" + (minutes<10 ? "0" + minutes : minutes) + ":" + (seconds<10 ? "0" + seconds : seconds);

// print to table
document.getElementById("spearmanAmount").innerHTML = spearmanAmount;
document.getElementById("spearmanWood").innerHTML = spearmanWood;
document.getElementById("spearmanClay").innerHTML = spearmanClay;
document.getElementById("spearmanIron").innerHTML = spearmanIron;
document.getElementById("spearmanProvisions").innerHTML = spearmanProvisions;
document.getElementById("spearmanTime").innerHTML = spearmanTime;


/* 
    SWORDSMAN
    this code below is for Swordsman unit
*/

// resource requirements
var swordsmanWood = 30;
var swordsmanClay = 30;
var swordsmanIron = 70;

var swordsman = document.getElementById("swordsman").value;

// calculate
var swordsmanAmount = swordsman;
var swordsmanWood = swordsmanWood * parseInt(swordsman);
var swordsmanClay = swordsmanClay * parseInt(swordsman);
var swordsmanIron = swordsmanIron * parseInt(swordsman);
var swordsmanProvisions = swordsman;
var swordsmanTime = swordsman * 194; // seconds

// calculate time
var totalSec = swordsmanTime;
var hours   = Math.floor(totalSec / 3600);
var minutes = Math.floor((totalSec - (hours * 3600)) / 60);
var seconds = totalSec - (hours * 3600) - (minutes * 60);
var swordsmanTime = (hours<10 ? "0" + hours : hours) + ":" + (minutes<10 ? "0" + minutes : minutes) + ":" + (seconds<10 ? "0" + seconds : seconds);

// print to table
document.getElementById("swordsmanAmount").innerHTML = swordsmanAmount;
document.getElementById("swordsmanWood").innerHTML = swordsmanWood;
document.getElementById("swordsmanClay").innerHTML = swordsmanClay;
document.getElementById("swordsmanIron").innerHTML = swordsmanIron;
document.getElementById("swordsmanProvisions").innerHTML = swordsmanProvisions;
document.getElementById("swordsmanTime").innerHTML = swordsmanTime;


/* 
    SUM OF ALL UNITS
    this code below is for calculate all units
*/

// all
var allAmount = parseInt(spearmanAmount) + parseInt(swordsmanAmount);
var allWood = parseInt(spearmanWood) + parseInt(swordsmanWood);
var allClay = parseInt(spearmanClay) + parseInt(swordsmanClay);
var allIron = parseInt(spearmanIron) + parseInt(swordsmanIron);
var allProvisions = parseInt(spearmanProvisions) + parseInt(swordsmanProvisions);
var allTime = spearmanTime + swordsmanTime;


// all print
document.getElementById("allAmount").innerHTML = allAmount;
document.getElementById("allWood").innerHTML = allWood;
document.getElementById("allClay").innerHTML = allClay;
document.getElementById("allIron").innerHTML = allIron;
document.getElementById("allProvisions").innerHTML = allProvisions;
document.getElementById("allTime").innerHTML = allTime;

}

工作方式：用戶輸入要創建的單位數量，然后JS代碼為他提供所有計算要求。

如您所見，它可以工作，但是我想修復的bug很少，但是我的知識不足無濟於事。 ：P

問題1-如何隱藏需求表並僅在用戶單擊“計算”按鈕時顯示？ CSS？

問題2-“重置”按鈕清除輸入，但未清除需求表中的結果，如何使它起作用？

問題＃3-我沒有添加時間，這很可能是字符串錯誤，但是我不知道如何解決。

問題4-如您所見，我重復了一些代碼，因為長矛手和劍客的代碼非常相似。 您是否知道如何減少重復？

好的，這就是我要問你們的全部。 希望有人可以幫助我。 沒錯，但是我是個初學者，所以我的代碼可以是……你知道不好。 ：P

Answer 1

對於問題1，我相信這是一個解決方案 。 我是Java的新手，所以我只能提供有限的幫助。

這是我更改的代碼行：

在HTML中：

<div class="row" id="requirements">

在CSS中：

#requirements {
    display:none;
}

在JS中：

document.getElementById("requirements").style.display="block";