CODEWITHSUNDEEP
javascripthtml
Eric Taurone
Eric Taurone

Reputation: 137

Cannot get JavaScript to work in an HTML webpage when it is a separate .js file

I've been whacking away at this for like 2 days with no luck. I'm trying to learn JavaScript and I'm working my way through this book. My HTML code is very simple, it's as follows:

</head>
<body>
    <input type="button" value="Click" onclick="alert(calcTot(48.21));" onmouseover="this.style.color = 'green';">

    <form>
        ZIP:<br />
        <input type="text" id="zip" onblur="fillCity();" /><br />
        City:<br />
        <input type="text" id="city" />
    </form>

    <script>src="JavaScript_Practice.js"</script>
</body>
</html>

I've got 2 separate functions I wrote in a separate .js file, they are as follows:

function calcTot(merchTot) {
    var orderTot;
    if (merchTot >= 100) {
        orderTot = merchTot;
    }
    else if (merchTot < 50.01) {
        orderTot = merchTot + 5;
    }
    else {
        orderTot = merchTot + 5 + merchTax(merchTot);
    }

    function merchTax(merchTot) {

        var taxTot = (0.03 * (merchTot - 50))

        return taxTot
    }

    return orderTot.toFixed(2);
}


function fillCity() {
    var cityName;
    var zipEntered = document.getElementById("zip").value;
    switch (zipEntered) {
        case "60608":
            cityName = "Chicago";
            break;
        case "68114":
            cityName = "Omaha";
            break;
        case "53212":
            cityName = "Milwaukee";
    }
    document.getElementById("city").value = cityName;
}

The files are in the same folder, and I've tried completely specifying the path to the .js file in the HTML file as well. I've also tried specifying the type as "text/JavaScript", but to no avail. When I press F12 and to try click my buttons/enter values in the fields, I get the following Errors: 

SCRIPT5009: SCRIPT5009: 'calcTot' is not defined

0: 'fillCity' is not defined

JavaScript is enabled on IE, and I've tried this on IE, Chrome, and Firefox. It doesn't work on any of them.

When I hard-code the functions inside the .html file, the functions work just fine. Lastly, I've tried uploading the file onto GitHub and referencing it from there and it also doesn't work. I feel like it must be something small and simple that I don't know about, any help would be greatly appreciated.

Upvotes: 1

Views: 163

Answers (2)

Mab
Mab

Reputation: 412

Hey Eric just as Simon stated, I just want to add this.

Any attribute you want to add to any html tag must come before closing the initial tag, either adding style,link image, etc 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

IS different from

<script>src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"</script>

As the browser will treat things withing the opening and closing tag differently

Hope this helps

Upvotes: 2

Simon Zyx
Simon Zyx

Reputation: 7171

The syntax to include a js file is actually:

<script src="JavaScript_Practice.js"></script>

not

<script>src="JavaScript_Practice.js"</script>

Upvotes: 2

Related Questions