CODEWITHSUNDEEP
javascripthtml
kcoenen9
kcoenen9

Reputation: 25

HTML onclick isn't running function

I am new to Javascript and just getting into it for my web design class. I am working on a project with Javascript inside HTML. I have it all written, but the HTML doesn't seem to call the Javascript function. I've been searching for a solution but can't seem to get anything to work. The code is: 

<html>
<head>
<script>
var calculateInterest = function(){
var rate;
var total;
var years = document.getElementById("years").value;
var principleAmount = document.getElementById("principal").value;
var interestRate = document.getElementById("intrest").value;
    if ((interestRate >= 0) && (interestRate <= 15)) {
        rate = interestRate / 100;

        if ((principleAmount >= 0) && (principleAmount <= 10000)) {
            total = principleAmount * (1 + rate * years);
            document.getElementById("total_with_intrest").value = total;
        }
        else {
            message-box ("Invalid data for principle amount.");
        }
    }
    else {
        message-box ("Invalid data for interest rate.");
    }
}
</script>
<style>
form{ border: solid blue;
       width:40em;
        padding:0.5em;}
input{padding: 0.5em;}

</style>
</head>


<body>
<form>

Enter Principal Ammount : <input type="text" id ="principal"  />
</br>

Enter Intrest Rate : <input type="text" id ="intrest"    />
</br>
Enter Number of Years : <input type="text" id ="years"  />
</br>
Grand Ammount : <input type="text" id ="total_with_intrest"   disabled /></br>
</br>
<input type="button" id="click" value="Calculate" onclick=calculateInterest()/> </br>


</form>
</body>

</html>

The browser error is "SyntaxError: expected expression, got '}' " on line 2 but I just can't see what the issue is. Any help is greatly appreciated!

Side note, I am aware there are some weird spelling mistakes. My instructor is from India and not totally fluent in English. She made the HTML file for us to use and we just have to put in the Javascript.

Upvotes: 0

Views: 69

Answers (1)

Blue
Blue

Reputation: 22921

There is no message-box function. Did you mean alert()? Your code currently works, with those changes:

var calculateInterest = function(){
    var rate;
    var total;
    var years = document.getElementById("years").value;
    var principleAmount = document.getElementById("principal").value;
    var interestRate = document.getElementById("intrest").value;
    if ((interestRate >= 0) && (interestRate <= 15)) {
        rate = interestRate / 100;

        if ((principleAmount >= 0) && (principleAmount <= 10000)) {
            total = principleAmount * (1 + rate * years);
            document.getElementById("total_with_intrest").value = total;
        }
        else {
            alert("Invalid data for principle amount.");
        }
    }
    else {
        alert("Invalid data for interest rate.");
    }
}
form{ border: solid blue;
       width:40em;
        padding:0.5em;}
input{padding: 0.5em;}
<form>

Enter Principal Amount : <input type="text" id ="principal"  />
</br>

Enter Interest Rate : <input type="text" id ="intrest"    />
</br>
Enter Number of Years : <input type="text" id ="years"  />
</br>
Grand Amount : <input type="text" id ="total_with_intrest"   disabled /></br>
</br>
<input type="button" id="click" value="Calculate" onclick="calculateInterest()" /> </br>


</form>

Small Nitpick: Fixed some small typos not related to code. Ammount => Amount. Intrest => Interest.

Upvotes: 3

Related Questions