How to call external javascript function in html with onclick

Question

I have two javascript function in my index.js file saved in the same folder directory as my html file but for some reasons i am able to call only one of the function the second function is not getting called.

index.js

function cond(){
    alert('Is the form correct');
}

function isNumber(e){
    e = e || window.event;
    var charCode = e.which ? e.which : e.keyCode;
    return /\d/.test(String.fromCharCode(charCode));
}

index.html

<?php require "header.html"?>

<label>Year</label>
<input type ="number" min="1950" max="2050" name="year" onkeypress="return isNumber(event)" required>

<label>school</label>
<input type ="text" onclick="cond();" name="school" required>

header.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <script src="index.js"></script>
    </head>
    <body>
    <main>

Am able to use the isNumber() function successfully but the other function cond() is not getting called when the text is clicked

Not related to your question, but you are including partial header for every page. It might be better to define layout.html with included content instead with require. — MTP
– MTP, Commented Mar 23, 2022 at 6:17

MTP · Accepted Answer · 2022-03-23 06:29:36Z

1

Maybe cond is shadowed by other function? Try changing it's name. Or take a look at the console output.

Usually it is a good practice to retrieve element and then bind event listener to it. Now your HTML is coupled with the JS. Here is a working example:

https://jsfiddle.net/nr65sLc0/

var schoolInput = document.getElementById('school-input');
if (schoolInput) {
  schoolInput.addEventListener('click', cond);
}

Remember to add id attribute for each input.

answered Mar 23, 2022 at 6:29

MTP

1811 silver badge12 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Atena Dadkhah · Accepted Answer · 2022-03-23 06:12:47Z

0

In your index.html file, you can't use PHP ( you required a file ) because index.html extension is HTML at first you should change that to PHP then both of them will work correctly.

Change index.html to index.php

answered Mar 23, 2022 at 6:12

Atena Dadkhah

6091 gold badge7 silver badges20 bronze badges

5 Comments

Serenity Emmanuel Over a year ago

sorry that was a mistake in the question the file name is actually index.php but it still not working even with that

Atena Dadkhah Over a year ago

So Do you have another file that you've included it in you file? because both functions are working for me. Please take a look at your console. Is there any error?

Serenity Emmanuel Over a year ago

Uncaught ReferenceError: cond is not defined this the error from the console

Atena Dadkhah Over a year ago

I didn't get such an error, maybe you have a problem adding files. Why don't you put your codes ( header.html & index.php ) in a PHP file? and another thing is that the <main> tag in header.html doesn't have closed tag.

Serenity Emmanuel Over a year ago

i have the closing tag for the <main> in another html file still the same issue but never mind i guess i just have to used the script in the index file directly I was only trying to clean up the code a bit.Thanks anyways

Collectives™ on Stack Overflow

How to call external javascript function in html with onclick

2 Answers 2

Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related