JSFiddle - React, Tailwind, and code Playground

by darkajax

HTML

Still
<input type="checkbox" value="1" id="still" />
Static 
<input type="checkbox" value="1" id="static"/>
Sea
<input type="checkbox" value="1" id="sea"/>
<br/>
<br/>
<span id="stillprint"></span>
<span id="staticprint"></span>
<span id="seaprint"></span>
<br/>
<br/>
<input id="total" type="button" value="Total"/>
<br/>
<p id="totalprint"></p>

JavaScript

window.onload = function () {
    var staticart = document.querySelector('input[id=static]');

var stillart = document.querySelector('input[id=still]');

var seaart = document.querySelector('input[id=sea]');

    
    
    function check() {
        if (staticart.checked) {
            var staticprice = 48;
document.getElementById('staticprint').innerHTML = 'static - £' + staticprice;

        } else {
            var staticprice = 0;
document.getElementById('staticprint').innerHTML = '';
        }
        
if (stillart.checked) {
            var stillprice = 29;
document.getElementById('stillprint').innerHTML = 'still - £' + stillprice;

        } else {
            var stillprice = 0;
document.getElementById('stillprint').innerHTML = '';
        }
        

if (seaart.checked) {
            var seaprice = 39;
document.getElementById('seaprint').innerHTML = 'sea - £' + seaprice;
    
        } else {
            var seaprice = 0;
            
document.getElementById('seaprint').innerHTML = '';
            
         }
        
  grandTotal= seaprice + stillprice + staticprice; 
    

    
    
    }

staticart.onchange = check;
    check();

stillart.onchange = check;
    check();

seaart.onchange = check;
    check(); 
    


};

document.getElementById("total").onclick = doTotal; 


    function doTotal() { document.getElementById('totalprint').innerHTML = 'Total - £' + grandTotal; }