.innerhtml, "DIV" içeriğine içerik yerleştirmiyor

Question

"totalPrice" ve "premPrice" adında bir div sonucu elde etmesi gereken aşağıdaki işleve sahibim: ancak .innerhtml, sayıların bir sebepten dolayı div? Belki bu kod parçasına bakabilir ve bana html girmemesinin olası nedenlerini söyleyebilir misiniz? Web dillerinden daha yeni olduğum için, fonksiyonu çağırmak zorunda mısın? ya da sadece tanımladığım fonksiyon çağrıldı mı?

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

bir işlev yazdıktan sonra, yere demen gerekiyor. fonksiyonun kapanış parantez sonra bu gibi çağrılabilir çalışıyorsanız:

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

Düzenleme: tıklamada işlevi çağırmak için güncellenmiş niyeti dayanarak, o satır içi JavaScript işlevleri çağırmak bad practice kabul edilir dikkat ediyorum, ve bazı durumlarda size sorun verebilir. Bunu yapmanın bir diğer yolu, tıklama etkinliğini JavaScript kodunuzdaki hedef öğenize eklemektir. İşte kodunuzu kullanarak bir jsfiddle.

Temelde, senin düğmesinden onclick="calculateTotal()" çıkarılır ve bir kimlik bu verdi:

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

Sonra JavaScript'inizde için aşağıdaki satırı eklendi:

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