地板计算器不工作

flooring Calculator not working

本文关键字：工作 计算器      更新时间：2023-09-26

我有一个计算器，用户使用下拉菜单选择一种类型的地板，然后添加木材的宽度，房间的宽度和房间的长度，我试图在一个框中显示它，但是当我点击计算它时，框中没有出现任何东西。

我尝试过使用输入文本框来输出值，我尝试过使用表单输出，我认为问题是在我的java脚本计算器中，原因是下拉菜单在html中的工作。我试着在没有下拉菜单的情况下运行计算，因此绕过了switch语句。

下面是我的html代码 
<body>
<th>Plank Calculator</th>
<table style="width:300px">
    <tr>
        <td>Choose flooring type:</td>
        <td>
            <select id="wood" name="wood" value="-choose floor type-">
                <option value="0" rel="laminate">laminate</option>
                <option value="1" rel="solid">solid</option>
                <option value="2" rel="engineered">engineered</option>
            </select>
        </td>
    </tr>
    <tr>
        <td>Choose wood:</td>
        <td>
            <select name="items" class="cascade" onChange="colour(this.value);">
                <option value="3" class="laminate">doc loc junior natural oak</option>
                <option value="4" class="laminate">doc loc senior natural oak</option>
                <option value="5" class="solid">natural oak</option>
                <option value="6" class="solid">rustic oak</option>
                <option value="7" class="engineered">natural oak lacquered</option>
                <option value="8" class="engineered">rustic oak lacquered</option>`</select>
        </td>
    </tr>
    <form>
    <tr>
        <td>Enter Length of room:</td>
        <td>
            <input type="text" name="l" />
        </td>
    </tr>
    <tr>
        <td>Enter Width of room:</td>
        <td>
            <input type="text" name="w" />
        </td>
    </tr>
    <tr>
        <td>number of packs needed</td>
        <td>
            <input type="text" id="packs" />
        </td>
        <td>
            <output name="packs" for ="w l"></output>
        </td>
    </tr>
</form>
</table>
<button id="calculate">calculate</button>

下面是我的javascript 
$(document).ready(function () {
var $cat = $('select[name=wood]'),
    $items = $('select[name=items]');
$cat.change(function () {
    var $this = $(this).find(':selected'),
        rel = $this.attr('rel'),
        $set = $items.find('option.' + rel);
    if ($set.size() < 0) {
        $items.hide();
        return;
    }
    $items.show().find('option').hide();
    $set.show().first().prop('selected', true);
});
$("#calculate").click(function () {
    var RLength = document.getElementById("l");
    var RWidth = document.getElementById("w");
    var packs = document.getElementById("packs");
    var length = RLength.value;
    var width = RWidth.value;
    var packs1 = "";
    ans = (parseInt(width, 10) + parseInt(length, 10));
    packs1 = Integer.toString(ans);
    packs.value = "packs1";
});});function colour(inobj) {

switch (inobj) {
    case "3":
        bl = "1900";
        bt = "7";
        bw = "125";
        break;
    case "4":
        bl = "1900";
        bt = "7";
        bw = "125";
        break;
    case "5":
        bl = "1900";
        bt = "7";
        bw = "125";
        break;
    case "6":
        bl = "1900";
        bt = "7";
        bw = "125";
        break;
    case "7":
        bl = "1900";
        bt = "7";
        bw = "125";
        break;
    case "8":
        bl = "1900";
        bt = "7";
        bw = "125";
        break;
    default:
        bl = "1900";
        bt = "7";
        bw = "125";
        break;
}
var bl = "";
var bt = "";
var bw = "";
var ans = $("#total");}

如有任何帮助，不胜感激

第一次尝试就很不错了!

http://jsfiddle.net/PeteA/82yk7L36/1/

上面显示了不同的位。关键是您使用了

document.getElementById('l')

但是您的L和W输入没有ID值(只有名称)。

我也整理了一下html

相关文章：