CODEWITHSUNDEEP
javascripthtml
user14373544
user14373544

Reputation:

How do I let onClick() read from my javascript file?

I have two files index.html and index.js. When I fill the text fields in the form and click the button, it should redirect to index.js. How do I achieve that?

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1 id="head">Hello</h1>
    <input type="email" id="email"></input>
    <br><br>
    <input type="password" id="pass"></input>
    <br><br>
    <button>Click</button>
    
    <script src="index.js"></script>
    
</body>
</html>

index.js

if (document.getElementById("email").nodeValue==document.getElementById("pass").nodeValue){
        alert("You are allowed");
}

EDIT: I can do this simply by creating the function inside the <script> tag itself and then calling the function inside onClick in the <button> tag. But instead, I want the onClick to call my index.js script which will perform the backend stuff

Upvotes: 0

Views: 1176

Answers (5)

s.kuznetsov
s.kuznetsov

Reputation: 15213

Always call your script inside js only. It is bad practice to call scripts in the html structure. I gave you an example of calling script logic and accessing a component using querySelector().

var form_button = document.querySelector('.thisisbutton');
var email_input = document.querySelector("#email");
var pass_input = document.querySelector("#pass");

form_button.onclick = function() {
if (email_input.value == pass_input.value){
        alert("You are allowed");
}
}
<body>
    <h1 id="head">Hello</h1>
    <input type="email" id="email">
    <br><br>
    <input type="password" id="pass">
    <br><br>
    <button class="thisisbutton">Click</button>    
</body>

Upvotes: 0

Kartiki Sahu
Kartiki Sahu

Reputation: 1

you should add the js file in your index.html

<script type="text/javascript" src="index.js"></script>

then you should add onclick event on your button

<button onclick="myFunction()">Click</button>

then in index.js you should add the function

function myFunction(){
    //your logic goes here
}

Upvotes: 0

Vimal Patel
Vimal Patel

Reputation: 3055

You need to use EventListener to bind button click event to a function.

   
    document.getElementsByTagName('button')[0].addEventListener('click',function(){
    
        if (document.getElementById("email").value==document.getElementById("pass").value){
        alert("You are allowed");
        
}

        });
<!DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>Document</title>
        </head>
        <body>
            <h1 id="head">Hello</h1>
            <input type="email" id="email"></input>
            <br><br>
            <input type="password" id="pass"></input>
            <br><br>
            <button>Click</button>  
        </body>
        </html>

Upvotes: 0

TheSavageTeddy
TheSavageTeddy

Reputation: 204

you should link the html file to the javascript file using

<script type="text/javascript" src="(your file location)"></script>

then add event listeners to listen to the button click using

document.addEventListener('DOMContentLoaded', function () {
    document.getElementById("button-id").addEventListener('click', yourFunction)
});

function yourFunction(){
    //your code here
}

also add an id to the button so you can add the event listener to it

<button id="button-id">Click</button>

Upvotes: 0

Biswa Soren
Biswa Soren

Reputation: 325

declare this function in index.js

function handleClick() {
  if (
    document.getElementById('email').nodeValue ===
    document.getElementById('pass').nodeValue
  ) {
    alert('You are allowed');
  }
}

call it on button click

<button onclick="handleClick()">Click</button>

Upvotes: 1

Related Questions