Question

嘿伙计们，这里完全是初学者。我正在尝试用HTML和Java创建一个绘图计算器。我很确定这一切都是错的所以我提前对此感到抱歉。目前没有任何作品，我不知道为什么，但它可能是一个简单的修复或我尝试编码的方式更深层次的问题。

基本上我试图将wallLength和wallHeight相乘以获得wallArea，将其添加到用户选择的绘画类型中，并在他们选择它时添加底色。然后我希望结果显示在所有其他输入框下。

`

    <div id="walls">
        <legend>Calculate the area of your walls!</legend>
            <label>Input the length and height of your walls.<br><br></label>
                <input type="text" id="wallHeight" value="Height of walls" onchange="calculateTotal()"> Height of the walls. <br> (Must be between 2 and 6 metres).<br> <br>
                <input type="text" id="wallLength" value="Length of walls" onchange="calculateTotal()"> Length of the walls. <br>(Walls must be between 1 and 25 metres).<br> <br>
                <input type="text" id="wallNumber" value="Number of walls" onchange="calculateTotal()">Number of walls.             
    </div>  

        <div id="painttype">    
            <label>Paint Type <br><br> </label>
                <input type="radio" id="luxuryPaint" name="selectedPaint" value="luxury" onchange="calculateTotal()">Luxury Quality (&#163;1.75 per square metre)<br>
                <input type="radio" id="standardPaint" name="selectedPaint" value="standard" onchange="calculateTotal()">Standard Quality (&#163;1.00 per square metre) <br>
                <input type="radio" id="economyPaint" name="selectedPaint" value="economy" onchange="calculateTotal()">Economy Quality (&#163;0.45 per square metre) <br>
            <p>
                <label for='underCoat' class="inlinelabel">Do you want an undercoat?</label> <br>
                <input type="checkbox" id="underCoat" value="undercoat" onchange="calculateTotal()"/>Undercoat (&#163;0.50 per square metre extra)                          
            </p>
        </div>

        <div id="result">
            <p>
            <input type="text" id="wallResult" value="Area of walls">
            <input type="text" id="resultBox" value="Result">
            </p>

`

抱歉，我不知道如何在没有格式化的情况下添加Javascript代码，但javascript在小提琴链接中，对不起。

Here's the fiddle link.

我很感谢你给我的任何帮助。感谢

编辑：添加JS以摆弄。

Answer 1

这里有一些问题，最大的问题是你从来没有在任何地方实际调用你的calculateWalls paintType或underCoat函数，这意味着它们内部的代码永远不会运行。

此外，没有ID paintResult的html对象，所以这一行 var paintResult = document.getElementById（“paintResult”）; 永远不会表现得很好，就像这一行一样 var undercoatResult = document.getElementById（“underCoat”）;应使用底涂变量替换，底涂变量需要在underCoat功能之外定义。最后 var wallResult = document.getElementById（“wallResult”）;

应该是 var wallResult = document.getElementById（“wallResult”）。value;

这些改变应该足以让你走上正确的轨道。

Answer 2

有史以来唯一被调用的函数是calculateTotal()，并且calculateTotal()中的变量没有设置，所以它总是会失败。

我希望看到这样的东西，只是警告这是更多的伪代码，语法可能不正确：

<input type="text" id="wallHeight" value="Height of walls" onchange="calculateWalls()">

然后calculateWalls()函数完成工作：

if(wallHeight > 0 && wallLength > 0){
    //DO WALL CALCULATION

    //PASS RESULT TO CACLULATETOTAL
    calculateTotal(wallResult);
}

创建油漆计算器时遇到麻烦

2 个答案: