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

JavaScript में बटन क्लिक पर ऐरे आइटम्स को रिवर्स क्रम में एक-एक करके कैसे प्रदर्शित करें?

मान लीजिए निम्न हमारा ऐरे है:

var listOfNames = [    'John',    'David',    'Bob' ];

निम्न हमारा बटन है:

<button id="reverse" onclick="reverseTheArray()">Click The Button To get the Reverse Value</button>

अब, ऐरे आइटम्स को रिवर्स में दिखाने के लिए, पहले ऐरे की लंबाई तक पहुंचें और लंबाई को 1 से घटाएं। फिर, रिवर्स ऑर्डर में विशेष इंडेक्स की सामग्री प्रिंट करें।

उदाहरण

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initialscale=1.0"> <title>Document</title> <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> </head> <body> <div align="center" id='reverseTheArray'></div> <button id="reverse" onclick="reverseTheArray()">Click The Button To get the Reverse Value</button> <script>    var listOfNames = [       'John',       'David',       'Bob'    ];    count=listOfNames.length-1;    function reverseTheArray(){       document.getElementById('reverseTheArray').innerHTML =       listOfNames[count];       count--;       if (count<0)          count=listOfNames.length-1;    } </script> </body> </html>

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

आउटपुट

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

JavaScript में बटन क्लिक पर ऐरे आइटम्स को रिवर्स क्रम में एक-एक करके कैसे प्रदर्शित करें?

चरण 1

जब आप बटन पर क्लिक करते हैं, तो आपको ऐरे का अंतिम मान मिलेगा। यह निम्न आउटपुट उत्पन्न करेगा:

JavaScript में बटन क्लिक पर ऐरे आइटम्स को रिवर्स क्रम में एक-एक करके कैसे प्रदर्शित करें?

चरण 2

फिर से बटन पर क्लिक करें, आपको दूसरा अंतिम मान मिलेगा। यह निम्न आउटपुट उत्पन्न करेगा:

JavaScript में बटन क्लिक पर ऐरे आइटम्स को रिवर्स क्रम में एक-एक करके कैसे प्रदर्शित करें?

  1. वेनिला जावास्क्रिप्ट का उपयोग करके बटन क्लिक पर ऐरे आइटम्स को डिव एलिमेंट पर प्रदर्शित करना वेनिला जावास्क्रिप्ट का उपयोग करके बटन क्लिक पर ऐरे आइटम्स को डिव एलिमेंट पर प्रदर्शित करना

    ऐरे के एलिमेंट्स को डिव में एम्बेड करने के लिए, हमें बस ऐरे पर पुनरावृति करने और एलिमेंट को डिव में जोड़ते रहने की आवश्यकता है। इसे इस तरह किया जा सकता है: उदाहरण const myArray = ["stone","paper","scissors"]; const embedElements = () => {    myArray.forEac

  1. जावास्क्रिप्ट में बटन क्लिक पर डिव को छिपाना जावास्क्रिप्ट में बटन क्लिक पर डिव को छिपाना

    मान लीजिए निम्नलिखित हमारा डिव है - Welcome in JavaScript निम्नलिखित हमारा बटन है। क्लिक करने पर, उपरोक्त डिव छिप जाना चाहिए -Click The Buttonडिव को छिपाने के लिए जावास्क्रिप्ट में style.display अवधारणा का उपयोग करें। कोड निम्नलिखित है -उदाहरण  Document Click The Button Welcome in Jav

  1. JavaScript में बटन क्लिक पर li एलिमेंट्स कैसे हटाएं? JavaScript में बटन क्लिक पर li एलिमेंट्स कैसे हटाएं?

    प्रत्येक <li> में बटन जोड़ें, इवेंट डेलिगेशन या व्यक्तिगत लिसनर से remove() या closest() मेथड से पैरेंट <li> हटाएं। HTML स्ट्रक्चर <ul id=subjectList> <li class=subjectName>JavaScript <button class=removeBtn>हटाएं</button></li> <li class=subjectN