मेरे पास दो फ़ाइलें index.html और index.js हैं। जब मैं फॉर्म में टेक्स्ट फ़ील्ड भरता हूं और बटन पर क्लिक करता हूं, तो इसे index.js पर रीडायरेक्ट करना चाहिए। मैं इसे कैसे हासिल करूं?

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");
}

संपादित करें: मैं इसे केवल <script> टैग के अंदर फ़ंक्शन बनाकर और फिर <button> टैग में फ़ंक्शन को onClick के अंदर कॉल करके कर सकता हूं। लेकिन इसके बजाय, मैं चाहता हूं कि onClick मेरी index.js स्क्रिप्ट को कॉल करे जो बैकएंड सामग्री का प्रदर्शन करेगी

0
user14373544 30 अक्टूबर 2020, 08:37

5 जवाब

सबसे बढ़िया उत्तर

इस फ़ंक्शन को index.js . में घोषित करें

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

इसे बटन पर कॉल करें क्लिक करें

<button onclick="handleClick()">Click</button>
1
Biswa Bhusan 30 अक्टूबर 2020, 08:51

हमेशा अपनी स्क्रिप्ट को JS के अंदर ही कॉल करें। एचटीएमएल संरचना में स्क्रिप्ट को कॉल करना बुरा अभ्यास है। मैंने आपको स्क्रिप्ट लॉजिक को कॉल करने और 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>
0
s.kuznetsov 30 अक्टूबर 2020, 09:09

आपको js फ़ाइल को अपने index.html . में जोड़ना चाहिए

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

तो आपको अपने बटन पर ऑनक्लिक ईवेंट जोड़ना चाहिए

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

फिर index.js में आपको फंक्शन जोड़ना चाहिए

function myFunction(){
    //your logic goes here
}
0
Kartiki Sahu 30 अक्टूबर 2020, 09:04

किसी फ़ंक्शन पर बटन क्लिक ईवेंट को बाध्य करने के लिए आपको EventListener का उपयोग करने की आवश्यकता है।

   
    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>
0
Vimal Patel 30 अक्टूबर 2020, 08:56

आपको html फ़ाइल को जावास्क्रिप्ट फ़ाइल से लिंक करना चाहिए

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

फिर बटन को सुनने के लिए ईवेंट श्रोताओं को जोड़ें का उपयोग करके क्लिक करें

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

function yourFunction(){
    //your code here
}

बटन में एक id भी जोड़ें ताकि आप इसमें ईवेंट श्रोता जोड़ सकें

<button id="button-id">Click</button>
0
TheSavageTeddy 30 अक्टूबर 2020, 08:51