CODEWITHSUNDEEP
javascripthtmlhyperlinkexternal
wuduyathink
wuduyathink

Reputation: 13

external javascript link not working

I can't figure out why my external javaScript won't link to my html code. What am I doing wrong? With my input function I am trying to concatenate 2 Strings and output the new String in the empty text field.

Thanks in advance guys!

HTML (index.html)

<head>
<title> Free GPA Calculator </title>
    <meta charset="utf-8" />
    <link rel="stylesheet" type="text/css" href="gpa_style.css" />
    <script type="text/javascript" src="gpacalc.js"></script>
</head>
<body>
    <div id="courseAddForm">
        <h1> Free GPA Calculator </h1>
        <form id="courseAdd">
            <label for="course" class="info" > Course </label>
            <input type="text" name="course" /><br />
            <label for="credits" class="info"> Number of Credits </label>
            <input type="text" name="credits" /><br />
            <label for="grade" class="info"> Letter Grade </label>
            <input type="text" name="grade" /><br />
            <div id="buttons">
                <input type="button" value="Submit" onclick="input()" />
                <input type="reset" value="Clear" />
             </div>
            <input type="text" name="exp" />
        </form>
</body>

JavaScript (gpacalc.js)

function input() {
    var doc = document.getElementById("courseAdd");
    var course = doc.course.value;
    var credits = doc.credits.value;
    var grade = doc.grade.value;
    doc.exp.value = course + credits;
}

Upvotes: 1

Views: 1494

Answers (1)

Lal
Lal

Reputation: 14810

See the fiddle

Use jQuery as follows for the click function and it works!!!

JS

$(document).ready(function () {
    function input() {

        var doc = document.getElementById("courseAdd");
        var course = doc.course.value;
        var credits = doc.credits.value;
        var grade = doc.grade.value;
        doc.exp.value = course + credits;
    }
    $('#myButton').on('click', input);
});

Also, i have replaced 

<input type="button" value="Submit" onclick="input()" />

with

<input type="button" value="Submit" id="myButton" />

in your HTML.

Upvotes: 1

Related Questions