.innerhtml không đặt nội dung trong "DIV"

Question

Tôi có chức năng sau sẽ tạo kết quả cho một div có tên "totalPrice" và "premPrice", tuy nhiên .innerhtml dường như không đặt các số trong div vì lý do nào đó? Có thể bạn có lẽ nhìn qua đoạn mã này và cho tôi biết lý do tại sao nó không nhập html? Vì tôi mới dùng ngôn ngữ web, bạn có phải gọi hàm này không? hoặc khi tôi chỉ định nghĩa nó là hàm được gọi là?

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

Sau khi viết một hàm, bạn cần phải gọi nó là ở đâu đó. Sau khung đóng cửa của hàm, cố gắng gọi nó như thế này:

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

Sửa: Căn cứ vào mục đích cập nhật của bạn để gọi hàm trên nhấp chuột, tôi xin lưu ý rằng nó được xem bad practice để gọi các hàm JavaScript nội tuyến, và nó có thể cung cấp cho bạn các vấn đề trong một số trường hợp. Một cách khác để làm điều đó là đính kèm sự kiện nhấp chuột vào phần tử mục tiêu của bạn trong mã JavaScript của bạn. Dưới đây là jsfiddle bằng mã của bạn.

Về cơ bản, tôi loại bỏ các onclick="calculateTotal()" từ nút của bạn và cho nó một ID:

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

Sau đó, tôi thêm vào dòng sau vào JavaScript:

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