CODEWITHSUNDEEP
javascript
user1916173
user1916173

Reputation: 61

JavaScript function not defined in HTML-document, why not?

I am coding a program that lets a user put in a telephone number and tell the user if it's accepted / denied based on a few conditions. I've worked out the function that does the calculation, but I can't get the JavaScript to work with the HTML-document: it doesn't get found.

Here are the two codes: (JS then HTML):

function testanummer(nummer){
    nummer = document.getElementById("a").value;
    if isNaN(nummer){
        console.log("Hi! This phone number appears faulty, please try again.");
    } else if (nummer.length <=8) && else if (nummer.length >=14) {
        console.log("Thanks! We'll be in touch shortly.");
    } else {
        console.log("Hi! This phone number appears faulty, please try again.");
    }

HTML:

<html>
<head>
    <title> Uppgift nummer 5</title>

    <script src="testanummer.js"></script>
</head> 


<body>
    <form>
        <label for="a">Skriv in ditt telefonnummer här: </label>
        <input type="text" name="nummer" id="a">
        <input type = "button" value ="Testa telefonnummer" onclick="testanummer(nummer);">
    </form>
</body>
</html>

Any idea why it doesn't work? I get this error:

Uncaught SyntaxError: Unexpected identifier

and:

Uncaught ReferenceError: testanummer is not defined

Any ideas why it doesn't work?

Thanks a lot!

Upvotes: 0

Views: 3025

Answers (2)

Jules
Jules

Reputation: 7213

Two errors:

} else if ((nummer.length <=8) && else if (nummer.length >=14)) {

Change it to (even though your condition is wrong... Shorter than 8 AND longer than 14?):

} else if ((nummer.length <=8) && (nummer.length >=14)) {

And you have an error in the onclick eventhandler:

onclick="testanummer(nummer);"

Should be:

onclick="testanummer(this.form.nummer.value);"

or if delete the argument from the function (since you retrieve it within the function anyway) even :

onclick="testanummer();"

So your final .js file should be:

function testanummer(nummer){
    nummer = document.getElementById("a").value;
    if (isNaN(nummer)) {
        console.log("Hi! This phone number appears faulty, please try again.");
    } else if ((nummer.length <=8) && (nummer.length >=14)) {  //HAVE A LOOK AT THIS CONDITION
        console.log("Thanks! We'll be in touch shortly.");
    } else {
        console.log("Hi! This phone number appears faulty, please try again.");
    }
}

Upvotes: 0

Guffa
Guffa

Reputation: 700152

There are two syntax errors in the code. The first syntax error is here:

if isNaN(nummer){

It should be:

if (isNaN(nummer)) {

The second syntax error is in this line:

} else if (nummer.length <=8) && else if (nummer.length >=14) {

The syntax should be:

} else if (nummer.length <= 8  && nummer.length >= 14) {

However, it seems that you got the conditions backwards, I think this is what you mean:

} else if (nummer.length >= 8  && nummer.length <= 14) {

When calling the function, you should get the value from the textbox, not just a reference to it. Also, not all browsers put input fields in the global scope, use the form to access the field:

<input type = "button" value ="Testa telefonnummer" onclick="testanummer(this.form.nummer.value);">

Then you can skip the assignment of the nummer variable in the function.

Upvotes: 4

Related Questions