JS中的简单计算器

Question

I create a simple web app in pure JS and generally I have few issues which I don't know how to solve. First of all, you can see my demo tool here: 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;

}

How it should work: user type how many units he would create, then JS code makes for him all calculation requirements.

As you can see it works but there are few bugs which I'd like to fix but my lack of knowledge doesn't help me. :P

Problem #1 - how can I hide the requirements table and show it only when user click button Calculate? CSS?

Problem #2 - button Reset clears inputs but doesn't clear results from requirements table, how can I make it work?

Problem #3 - times aren't added as I want, well it's probably string bug but I don't have any idea how to solve it.

Problem #4 - as you can see I repeat some of code, for spearman and swordsman code is very similar. Do you have any idea how I can make it less repeat?

Ok, so that's all what I wanted to ask you guys. Hope someone could help me. Don't get wrong but I quite beginner programmer so my code can be... you know not good. :P

Answer 1

For problem 1, I believe this is a solution . I'm new to Javascript so pretty limited in how I can help.

Here are the lines of code I changed:

In HTML:

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

In CSS:

#requirements {
    display:none;
}

In JS:

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