.innerhtml nie umieszcza treści w "DIV"

Question

Mam następującą funkcję, która powinna dawać wynik do div o nazwie "totalPrice" i "premPrice", jednak .innerhtml nie wydaje się umieszczać liczby w div z jakiegoś powodu? Czy możesz zajrzeć do tego fragmentu kodu i podać mi możliwe powody, dla których nie wprowadza on html? Ponieważ jestem nowszy w językach internetowych, czy musisz zadzwonić do tej funkcji? lub kiedy po prostu zdefiniować, to jest funkcja o nazwie?

html:

  <label class='next action-button'><input type="button" name="tank" value="Yes" onclick="calculateTotal()" />Yes</label><br/> 
<p>standard and premium system specs</p> 
    <br/> 
       <div id="totalPrice"></div> 
       <br/> 
       <div id="premPrice"></div> 

JS:

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); 

} 

Answer 1

Po napisaniu funkcji, trzeba nazwać to gdzieś. Po wspornika zamknięcia funkcji, próbując nazywając go tak:

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); 

} 

calculateTotal(); 

Edit: Na podstawie zaktualizowanego zamiarze wywołania funkcji na kliknięcia, chciałbym zauważyć, że jest on uważany bad practice wywołać funkcje JavaScript inline, i może to powodować problemy w niektórych przypadkach. Innym sposobem na to jest dołączenie zdarzenia kliknięcia do elementu docelowego w kodzie JavaScript. Oto kod jsfiddle.

Zasadniczo, usunąłem onclick="calculateTotal()" ze swojego przycisku, a dał mu ID:

<input id="calc-button" type="button" name="tank" value="Yes" /> 

Potem dodawali następujący wiersz do javascript:

document.getElementById("calc-button").addEventListener("click", calculateTotal);