CODEWITHSUNDEEP
javascriptformsinputswitch-statement
user4612360
user4612360

Reputation: 139

Javascript switch statements for form input

Trying to learn some basic JS principles to create a delivery cost calculator based on user input forms and JS switch statements to return a price.

(I know this would be easier and more practical with a server database but I would prefer to stick to JS for now)

This is my attempt;

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;
        };

Here is the jsfiddle: https://jsfiddle.net/2kussrtc/1/

The fiddle doesn't work at all, although my tested version displays the message but returns the price (var cost) as undefined?

Upvotes: 0

Views: 1928

Answers (1)

Jonathan Tweedy
Jonathan Tweedy

Reputation: 131

See here for corrections: https://jsfiddle.net/jetweedy/upvfgck2/2/

Several problems...

(1) if/else blocks weren't properly formatted (you were closing with semicolon after the 'if' part, and then putting 'else' separately and not closing that off afterwards.

(2) You had 'postcode' as an ID on a div as well as an input, so 'document.getElementById(...)' just retrieved the first one (the DIV not the input) and couldn't figure out its 'value'.

(3) Specifically in jsfiddle, if you use the 'onload' setting on the left side, then the functions that you define will only be known in the body.onload scope, so later when you click the button after the page loads, it won't find the functions. You can circumvent this two ways... either just don't use the 'onLoad' option in jsFiddle, or else add your event listener to your button in your javascript instead of in your HTML code... something like...

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

Hope that helps. I got it working-ish, but once I cleaned it up enough figure out the problems, left it alone. Hopefully the notes 1-3 made sense.

Upvotes: 2

Related Questions