.innerhtml non sta inserendo il contenuto in "DIV"

Question

Ho la seguente funzione che dovrebbe produrre un risultato per divs denominati "totalPrice" e "premPrice", tuttavia .innerhtml non sembra posizionare i numeri nel div per qualche motivo? Puoi forse dare un'occhiata a questo pezzo di codice e dirmi i possibili motivi per cui non sta inserendo l'html? Dal momento che sono più recente nei linguaggi web, devi chiamare la funzione? o quando lo definisco semplicemente è la funzione chiamata?

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

Dopo aver scritto una funzione, è necessario chiamare da qualche parte. Dopo la staffa della funzione di chiusura, cercando di chiamare in questo modo:

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: Sulla base della sua intenzione aggiornato per chiamare la funzione click, vorrei far notare che è considerato bad practice chiamare funzioni JavaScript in linea, e potrebbe darti dei problemi in alcuni casi. Un altro modo per farlo è associare l'evento click all'elemento target nel codice JavaScript. Ecco un jsfiddle usando il tuo codice.

Fondamentalmente, ho rimosso il onclick="calculateTotal()" dal bottone e dato un ID:

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

Poi ho aggiunto la seguente riga al JavaScript: codice

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