How to call external javascript function in html with onclick-CodePudding

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

CodePudding user response：

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.

CodePudding user response：

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