用于表单输入的Javascript switch语句

Javascript switch statements for form input

本文关键字：switch 语句 Javascript 表单 输入 用于      更新时间：2023-09-26

尝试学习一些基本的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成本)为未定义?

查看更正:https://jsfiddle.net/jetweedy/upvfgck2/2/

几个问题……

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

(2)您有'邮政编码'作为div和输入的ID，所以'document.getElementById(…)'只是检索了第一个(div不是输入)，无法找出它的'值'。

(3)特别是在jsfiddle中，如果你在左侧使用'onload'设置，那么你定义的函数将只在主体中被知道。Onload作用域，因此稍后当您在页面加载后单击该按钮时，它不会找到该函数。你可以通过两种方式来规避这一点……要么就不要在jsFiddle中使用"onLoad"选项，要么就把你的事件监听器添加到你的javascript按钮中，而不是在你的HTML代码中…类似…

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

希望有帮助。我把它弄得可以工作了，但一旦我把它清理得足够干净，找出了问题所在，就不管它了。希望注释1-3是有意义的

相关文章：