Question

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

我尝试使用输入文本框输出值，我试图使用表单输出，我相信问题出在我的java脚本中的计算器中，原因就是下拉菜单＆＃39 ; s在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");}

任何帮助将不胜感激

Answer 1

第一次尝试非常好！

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

以上显示各种位。关键点是你正在使用

document.getElementById('l')

但是你的L和W输入没有ID值（只有一个名字）。

我还整理了一下html。

地板计算器不工作

1 个答案: