Javascript 用于表单输入的 switch 语句

Question

尝试学习一些基本的 JS 原理，以创建基于用户输入表单和 JS switch 语句的交付成本计算器 return 价格。

（我知道使用服务器数据库会更容易、更实用，但我现在更愿意坚持使用 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/

fiddle 根本不起作用，虽然我的测试版本显示消息但 return 价格（var 成本）未定义？

Answer 1

请参阅此处进行更正：https://jsfiddle.net/jetweedy/upvfgck2/2/

几个问题...

(1) if/else 块的格式不正确（您在 'if' 部分后用分号结束，然后单独放置 'else' 并且之后没有关闭它。

(2) 你有 'postcode' 作为 div 的 ID 以及输入，所以 'document.getElementById(...)' 只是检索了第一个（DIV 不是输入）并且无法弄清楚它的 'value'.

(3) 具体在jsfiddle中，如果你使用左侧的'onload'设置，那么你定义的函数只会在body.onload范围内被知道，所以以后当你页面加载后单击按钮，它将找不到功能。您可以通过两种方式规避这两种方式...要么不要在 jsFiddle 中使用 'onLoad' 选项，要么将您的事件侦听器添加到 javascript 中的按钮而不是 HTML 中代码...类似...

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

希望对您有所帮助。我得到了它的工作-ish，但是一旦我清理它足以找出问题，就不要管它了。希望注释 1-3 有意义。

Javascript 用于表单输入的 switch 语句

Javascript switch statements for form input

javascript

forms

input

switch-statement