Простой калькулятор в JS

Question

Я создаю простое веб-приложение в чистом JS и, как правило, у меня есть несколько вопросов, которые я не знаю, как их решить. Прежде всего, вы можете увидеть мой демонстрационный инструмент здесь: 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 код делает для него все требования расчета.

Как вы можете видеть, это работает, но есть несколько ошибок, которые я хотел бы исправить, но моя нехватка знаний не помогает мне. : P

Проблема №1 - как скрыть таблицу требований и показать ее только при нажатии кнопки «Вычислить»? CSS?

Проблема №2 - кнопка Сброс очищает входы, но не очищает результаты таблицы требований, как я могу заставить ее работать?

Проблема № 3 - раз не добавляется, как я хочу, ну, вероятно, это ошибка строки, но я не знаю, как ее решить.

Проблема № 4 - как вы можете видеть, я повторяю код, для копья и меча, очень похожий код. Вы хоть представляете, как я могу сделать это меньше повторять?

Хорошо, вот что я хотел спросить вас, ребята. Надеюсь, кто-то может мне помочь. Не ошибетесь, но я довольно начинающий программист, поэтому мой код может быть ... вы знаете, что это не хорошо. : P

Answer 1

Для проблемы 1, я считаю, this is a solution. Я новичок в Javascript, настолько ограниченный тем, что могу помочь.

Вот строки кода я изменил:

В HTML:

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

В CSS:

#requirements { 
    display:none; 
} 

В JS:

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