Computer >> कंप्यूटर ट्यूटोरियल >  >> प्रोग्रामिंग >> JavaScript

JavaScript में 'select' एलिमेंट पर addEventListener काम क्यों नहीं करता


इसके बजाय, querySelector() के साथ addEventListener() का उपयोग करें।

उदाहरण

कोड निम्न है:

<!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> <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <body>    <select id="selectDemo">       <option value="Java">Java</option>       <option value="Javascript">Javascript</option>       <option value="MySQL">MySQL</option>       <option value="MongoDB">MongoDB</option>    </select> </body> <script>    document.querySelector('#selectDemo').addEventListener('change', subjectMarks);    function subjectMarks() {       console.log(58);    } </script> </html>

उपरोक्त प्रोग्राम को चलाने के लिए, फ़ाइल का नाम anyName.html(index.html) सहेजें और फ़ाइल पर राइट-क्लिक करें। VS कोड एडिटर में "Open with live server" विकल्प चुनें।

यह निम्न आउटपुट उत्पन्न करेगा:

JavaScript में  select  एलिमेंट पर addEventListener काम क्यों नहीं करता

अब, ड्रॉपडाउन सूची से मान चुनें:

JavaScript में  select  एलिमेंट पर addEventListener काम क्यों नहीं करता

आउटपुट

यह निम्न आउटपुट उत्पन्न करेगा:

JavaScript में  select  एलिमेंट पर addEventListener काम क्यों नहीं करता


  1. JavaScript में ड्रॉपडाउन (सिलेक्ट) की सिलेक्टेड वैल्यू कंसोल पर कैसे डिस्प्ले करें? JavaScript में ड्रॉपडाउन (सिलेक्ट) की सिलेक्टेड वैल्यू कंसोल पर कैसे डिस्प्ले करें?

    उदाहरण onchange इवेंट और selectedIndex से सिलेक्टेड ऑप्शन का टेक्स्ट प्राप्त करें। <!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> <

  1. JavaScript में  select  एलिमेंट पर addEventListener काम क्यों नहीं करता JavaScript में 'select' एलिमेंट पर addEventListener काम क्यों नहीं करता

    इसके बजाय, querySelector() के साथ addEventListener() का उपयोग करें।उदाहरणकोड निम्न है:<!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> <link

  1. JavaScript में ID द्वारा एलिमेंट हटाना JavaScript में ID द्वारा एलिमेंट हटाना

    ID द्वारा एलिमेंट हटाने के लिए, आप remove() का उपयोग कर सकते हैं।उदाहरणकोड निम्न है:<!DOCTYPE html> <html lang=en> <head>    <meta charset=UTF-8>    <meta name=viewport content=width=device-width, initial-scale=1.0>    <title>Document