Question

尝试学习一些基本的JS原则，根据用户输入表单和JS switch语句创建一个交付成本计算器来返回价格。

（我知道这对于服务器数据库来说会更简单，更实用，但我现在更愿意坚持使用JS）

这是我的尝试;

HTML

<h2>DELIVERY CHARGE CALCULATOR</h2>

<div id="size">

    <p id="step1">STEP 1</p>
    <p>DIMENSIONS</p>
    <p>WIDTH(cm):
        <input type="text" name="width" id="width" size="5" maxlength="4" />
    </p>
    <p>LENGTH(cm):
        <input type="text" name="length" id="length" size="5" maxlength="4" />
    </p>
    <p>HEIGHT(cm):
        <input type="text" name="height" id="height" size="5" maxlength="4" />
    </p>
</div>

<div id="postcode">
    <p id="step2">STEP 2</p>
    <p>Postcode area (eg. N1, N2 etc)</p>
    <input type="text" id="postcode" name="postcode" size="5" maxlength="3" />
</div>

<input type="button" id="button" value="GET PRICE" onClick="getDetails()">

<div id="message">
    <p><b>THANK YOU</b></p>
    <P>THE COST FOR DELIVERY FROM STORE WILL BE:</P>
    <p id="price_msg"></p>
</div>

CSS

#message {
    visibility: hidden;
}

#message.show {
    visibility: visible;
}

JS

var width;
var length;
var height;
var men;
var postcode;
var cost;

function smallVan(postcode) {
    switch (postcode) {
        case "N1":
            cost = "45";
            break;
        case "N2":
            cost = "50";
            break;
    }
    showPrice(cost);
};

function transit(postcode) {
    switch (postcode) {
        case "N1":
            cost = "80";
            break;
        case "N2":
            cost = "100";
            break;
    }
    showPrice(cost);
};

function getVehicle() {
    if (width < 100 && length < 100 && height < 100) {
        postcode = document.getElementById("postcode").value.toUpperCase();
        smallVan(postcode);
    };
    else if (width > 100 || length > 100 || height > 100 {
            postcode = document.getElementById("postcode").value.toUpperCase();
            transit(postcode);
        };

        function getDetails() {
            width = document.getElementById("width").value;
            length = document.getElementById("length").value;
            height = document.getElementById("height").value;
            getVehicle(width, length, height);
        };

        function showPrice(cost) {
            var msg_display = document.getElementById("message")
            msg_display.className = "show";
            var price = document.getElementById("price_msg");
            price.textContent = "£" + cost;
        };

这是jsfiddle：https://jsfiddle.net/2kussrtc/1/

小提琴根本不起作用，虽然我测试的版本显示消息但是将价格（var cost）返回为undefined？

Answer 1

请点击此处查看更正：https://jsfiddle.net/jetweedy/upvfgck2/2/

有几个问题......

（1）如果/ else块没有正确格式化（在＆＃39; if＆＃39;部分之后用分号结束，然后单独放置＆＃39; else＆＃39;而不是关闭之后关闭。

（2）你有＆＃39;邮政编码＆＃39;作为div上的ID和输入，所以＆＃39; document.getElementById（...）＆＃39;只检索了第一个（DIV而不是输入）并且无法找出其值＆＃39;。

（3）特别是在jsfiddle，如果你使用＆＃39; onload＆＃39;在左侧设置，然后您定义的功能只能在body.onload范围内知道，所以稍后当您在页面加载后单击按钮时，它将无法找到这些功能。你可以绕过这两种方式......要么就是不要使用＆＃39; onLoad＆＃39; jsFiddle中的选项，或者将您的事件监听器添加到您的javascript而不是HTML代码中的按钮...类似......

document.getElementById('button').onclick = getDetails;

希望有所帮助。我得到了它的工作，但是一旦我把它清理干净就可以解决问题，不管怎样。希望笔记1-3有意义。

用于表单输入的Javascript switch语句

1 个答案: