JSFiddle - React, Tailwind, and code Playground
HTML
<label class='next action-button'>
<input id="calc-button" type="button" name="tank" value="Yes" />
Yes
</label>
<br/>
<p>standard and premium system specs</p>
<br/>
<div id="totalPrice"></div>
<br/>
<div id="premPrice"></div>
JavaScript
function calculateTotal() {
var boilerPrice = getBoilerSizePrice() + getBedroomSizePrice() + getBathroomSizePrice() + getTankSizePrice();
//display the result
var divobj = document.getElementById('totalPrice');
divobj.style.display = 'block';
divobj.innerHTML = "Your New Boiler Install Price is £" + boilerPrice;
var divobj = document.getElementById('premPrice');
divobj.style.display = 'block';
divobj.innerHTML = "Premium price £" + ((boilerPrice / 100) * 120);
}
function getBoilerSizePrice() {
return 42;
}
function getBedroomSizePrice() {
return 32;
}
function getBathroomSizePrice() {
return 23;
}
function getTankSizePrice() {
return 24;
}
document.getElementById("calc-button").addEventListener("click", calculateTotal);