Question

我有以下函数应该为名为“totalPrice”和“premPrice”的div生成结果，但是.innerhtml似乎没有将数字放在div中由于某种原因？您是否可以查看这段代码并告诉我为什么它不输入html的可能原因？由于我是网络语言的新手，你是否需要调用该函数？或者当我简单地定义它是一个名为？

的函数

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

编写函数后，需要在某处调用它。在函数的结束括号之后，尝试调用它：

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

修改：根据您在点击时调用该功能的更新意图，我会注意到它被认为是bad practice内联调用JavaScript函数，它可能会给你在某些情况下的问题。另一种方法是将click事件附加到JavaScript代码中的目标元素。这是jsfiddle使用您的代码。

基本上，我从您的按钮中删除了onclick="calculateTotal()"并为其提供了ID：

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

然后我在JavaScript中添加了以下行：

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

.innerhtml没有在“DIV”中放置内容

1 个答案: