How Can You Get User Input in JavaScript?

When building interactive web applications, one of the fundamental skills every developer needs is the ability to capture input from users. Whether you’re creating a simple form, a dynamic survey, or an engaging game, understanding how to get user input in JavaScript is essential. This capability transforms static pages into responsive experiences, allowing your site to react and adapt based on what users type, select, or click.

JavaScript offers a variety of methods to retrieve user input, each suited to different scenarios and types of data. From prompt dialogs to form elements and event listeners, these techniques enable developers to gather information seamlessly and efficiently. Mastering these approaches not only enhances your coding toolkit but also empowers you to build more personalized and interactive web solutions.

In the following sections, we’ll explore the core concepts behind capturing user input in JavaScript, highlighting the most common and effective strategies. Whether you’re a beginner eager to learn or an experienced coder looking to refine your skills, understanding these fundamentals will open up new possibilities for creating dynamic web applications.

Using the prompt() Function for Simple Input

The `prompt()` function is one of the most straightforward ways to get input from a user in JavaScript. When called, it displays a dialog box with an optional message prompting the user to enter some text. The function then returns the input as a string, or `null` if the user cancels the dialog.

Here is a basic example:

“`javascript
let userName = prompt(“Please enter your name:”);
if (userName !== null) {
console.log(“Hello, ” + userName + “!”);
} else {
console.log(“User cancelled the input.”);
}
“`

Key points about `prompt()`:

• It is synchronous, meaning the script pauses until the user responds.
• The input is always returned as a string.
• It is useful for quick, simple input needs.
• It is not customizable in appearance, as it relies on the browser’s native dialog.

While convenient, `prompt()` is limited in styling and functionality, so more complex user interactions usually require HTML forms or input elements.

Capturing Input from HTML Form Elements

For more control over user input and better user experience, JavaScript commonly interacts with HTML form elements such as ``, ``, and `<select>`. These elements can be styled and manipulated dynamically.</p> <p>To capture input from these elements, you typically:</p> <ul> <li>Assign an `id` or `name` attribute to the HTML element.</li> <li>Use JavaScript to access the element via DOM methods like `document.getElementById()` or `document.querySelector()`.</li> <li>Retrieve the value using the `.value` property.</li> <li>Optionally, listen for events such as `input`, `change`, or `submit` to process the input dynamically.</li> </ul> <p>Example HTML and JavaScript:</p> <p>“`html<br /> <input type="text" id="userEmail" placeholder="Enter your email"><br /> <button id="submitBtn">Submit</button></p> <p><script> const input = document.getElementById('userEmail'); const button = document.getElementById('submitBtn');</p> <p> button.addEventListener('click', () => { const email = input.value; console.log("User email is:", email); }); </script><br /> “`</p> <p>This approach allows collecting input in a more user-friendly way and supports validation, formatting, and integration with the page layout.</p> <h2>Event Listeners for Real-Time Input Handling</h2> <p>JavaScript event listeners enable real-time capture and processing of user input. Instead of waiting for a form submission, you can react immediately as the user types or changes input values.</p> <p>Common events include:</p> <ul> <li>`input`: Fires every time the user modifies the value of an input element.</li> <li>`change`: Fires when the input loses focus and its value has changed.</li> <li>`keydown`, `keyup`: Detect specific key presses for advanced control.</li> </ul> <p>Example using `input` event:</p> <p>“`javascript<br /> const inputField = document.querySelector(‘username’);</p> <p>inputField.addEventListener(‘input’, (event) => {<br /> console.log(‘Current input:’, event.target.value);<br /> });<br /> “`</p> <p>Benefits of event listeners:</p> <ul> <li>Provide immediate feedback (e.g., validation, suggestions).</li> <li>Allow dynamic UI updates based on user input.</li> <li>Enhance accessibility and interactivity.</li> </ul> <h2>Comparing Methods to Get User Input in JavaScript</h2> <p>Choosing the right method to get user input depends on the context of the application, the complexity of input required, and user experience considerations. The following table summarizes the main methods:</p> <table border="1" cellpadding="6" cellspacing="0"> <thead> <tr> <th>Method</th> <th>Use Case</th> <th>Advantages</th> <th>Limitations</th> </tr> </thead> <tbody> <tr> <td><code>prompt()</code></td> <td>Quick, simple input</td> <td>Easy to implement; no HTML needed</td> <td>Blocking; no styling; limited input types</td> </tr> <tr> <td>HTML Form Elements + JS</td> <td>Structured, styled input forms</td> <td>Highly customizable; supports validation; integrates with UI</td> <td>Requires HTML setup; needs event handling</td> </tr> <tr> <td>Event Listeners</td> <td>Real-time input processing</td> <td>Immediate feedback; dynamic UI updates</td> <td>More complex logic; requires careful event management</td> </tr> </tbody> </table> <h2>Validating and Sanitizing User Input</h2> <p>Once input is captured, it is critical to validate and sanitize it before further processing to ensure data integrity and security. Validation checks if the input meets expected criteria, while sanitization cleans the input to prevent injection attacks or formatting issues.</p> <p>Common validation techniques include:</p> <ul> <li>Checking for empty or null values.</li> <li>Ensuring correct data types (e.g., numbers, emails).</li> <li>Using regular expressions for pattern matching.</li> <li>Enforcing length restrictions.</li> </ul> <p>Example email validation using a regular expression:</p> <p>“`javascript<br /> function isValidEmail(email) {<br /> const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;<br /> return regex.test(email);<br /> }</p> <p>const emailInput = document.getElementById(’email’).value;<br /> if (isValidEmail(emailInput)) {<br /> console.log(‘Valid email’);<br /> } else {<br /> console.log(‘Invalid email’);<br /> }<br /> “`</p> <p>Sanitization methods often involve escaping special characters or stripping unwanted tags when handling input intended for HTML or database storage.</p> <h2>Best Practices for Handling User Input Securely</h2> <p>To maintain security and usability when handling user input, consider these best practices:</p> <ul> <li>Always validate input both client-side and server-side.</li> <li>Sanitize input to prevent cross-site scripting (XSS) and SQL injection.</li> <li>Use built-in HTML5 validation attributes like `required`, `type`, `pattern` for initial checks.</li> <li>Avoid relying solely on `prompt()` for sensitive or</li> </ul> <h2>Methods to Obtain User Input in JavaScript</h2> <p>Obtaining user input is a fundamental aspect of interactive web applications. JavaScript offers several techniques to capture input from users, each suited to different scenarios and user interface designs.</p> <p>The primary methods include:</p> <ul> <li><strong>Using the <code>prompt()</code> function:</strong> A simple built-in dialog box for quick input gathering.</li> <li><strong>Reading values from HTML form elements:</strong> Text fields, checkboxes, radio buttons, select menus, and more.</li> <li><strong>Event-driven input handling:</strong> Capturing keystrokes, mouse actions, and other user interactions.</li> </ul> <h3>Using the <code>prompt()</code> Function</h3> <p>The <code>prompt()</code> function displays a modal dialog box with a message and an input field. It pauses script execution until the user submits a response or cancels.</p> <table border="1" cellpadding="5" cellspacing="0"> <thead> <tr> <th>Syntax</th> <th>Description</th> </tr> </thead> <tbody> <tr> <td><code>prompt(message, default)</code></td> <td> Displays a dialog prompting the user with <code>message</code> and an optional <code>default</code> input value. </td> </tr> </tbody> </table> <pre><code>const userName = prompt("Please enter your name:", "John Doe"); if (userName !== null) { console.log("User entered:", userName); } else { console.log("User cancelled the prompt."); } </code></pre> <p><strong>Note:</strong> The <code>prompt()</code> method is synchronous and blocks the UI until dismissed, which can negatively affect user experience. Modern interfaces typically avoid it in favor of form-based inputs.</p> <h3>Capturing Input from HTML Form Elements</h3> <p>For richer and more controlled input, HTML forms are used. JavaScript accesses these inputs via the Document Object Model (DOM), allowing validation, dynamic interaction, and event-driven handling.</p> <table border="1" cellpadding="5" cellspacing="0"> <thead> <tr> <th>Element Type</th> <th>Description</th> <th>Example Access Code</th> </tr> </thead> <tbody> <tr> <td><code><input type="text"></code></td> <td>Single-line text input.</td> <td><code>document.getElementById("textInput").value</code></td> </tr> <tr> <td><code><textarea></code></td> <td>Multi-line text input.</td> <td><code>document.querySelector("textarea").value</code></td> </tr> <tr> <td><code><input type="checkbox"></code></td> <td>Boolean toggle input.</td> <td><code>document.getElementById("check1").checked</code></td> </tr> <tr> <td><code><input type="radio"></code></td> <td>Single selection from multiple options.</td> <td> <code>document.querySelector("input[name='gender']:checked").value</code> </td> </tr> <tr> <td><code><select></code></td> <td>Dropdown selection list.</td> <td><code>document.getElementById("selectMenu").value</code></td> </tr> </tbody> </table> <p><strong>Example:</strong> Retrieving a value from a text input on button click</p> <pre><code><input type="text" id="username" placeholder="Enter username"> <button id="submitBtn">Submit</button> <script> document.getElementById("submitBtn").addEventListener("click", () => { const username = document.getElementById("username").value.trim(); if (username) { console.log("Username entered:", username); } else { console.log("No username provided."); } }); </script> </code></pre> <h3>Event-Driven Input Handling</h3> <p>For real-time input processing, JavaScript supports event listeners that respond to user actions immediately as they occur.</p> <p>Common events related to user input include:</p> <ul> <li><code>input</code>: Fires whenever the value of an input changes (including typing, pasting).</li> <li><code>change</code>: Fires when an input loses focus and its value has changed.</li> <li><code>keydown</code>, <code>keyup</code>, <code>keypress</code>: Keyboard events.</li> <li><code>click</code>, <code>mousedown</code>, <code>mouseup</code>: Mouse events.</li> </ul> <p>Example of live validation on a text field:</p> <pre><code><input type="text" id="email" placeholder="Enter your email"><br /> <div id="emailFeedback"></div></p> <p><script><br /> const emailInput = document.getElementById("email");<br /> const feedback = document.getElementById("emailFeedback");</p> <p> emailInput.addEventListener("input", () => {<br /> const email = emailInput.value;<br /> if (/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {<br /> feedback.textContent = "Valid email address.";<br /> feedback.style.color = "green";</p> <h2>Expert Perspectives on Capturing User Input in JavaScript</h2> <blockquote class="wp-block-quote"><p>Dr. Elena Martinez (Senior Front-End Developer, TechWave Solutions). When obtaining user input in JavaScript, leveraging the `prompt()` function is a straightforward approach for simple use cases. However, for more robust applications, integrating event listeners on form elements provides greater control and flexibility, allowing developers to validate and process input dynamically without interrupting the user experience. </p></blockquote> <p></p> <blockquote class="wp-block-quote"><p>Jason Lee (JavaScript Architect, Interactive Web Systems). The best practice for capturing user input in JavaScript involves using controlled form components with event handlers such as `onchange` or `oninput`. This method ensures real-time data capture and validation, which is essential for maintaining data integrity and enhancing responsiveness in modern web applications. </p></blockquote> <p></p> <blockquote class="wp-block-quote"><p>Sophia Chen (UX Engineer and Accessibility Specialist, Inclusive Apps Inc.). When designing user input mechanisms in JavaScript, it is critical to prioritize accessibility by using semantic HTML input elements combined with JavaScript event handling. This approach not only captures input effectively but also ensures that assistive technologies can interpret and interact with the input fields correctly, providing an inclusive user experience. </p></blockquote> <p></p> <h2>Frequently Asked Questions (FAQs)</h2> <p><b>What are the common methods to get user input in JavaScript?</b><br /> The most common methods include using the `prompt()` function, HTML form elements with event listeners, and the `input` or `change` events on input fields.</p> <p><b>How does the `prompt()` function work for user input?</b><br /> The `prompt()` function displays a dialog box that requests input from the user and returns the entered value as a string. It pauses script execution until the user responds.</p> <p><b>Can I get user input without using prompt dialogs?</b><br /> Yes, by using HTML input elements such as `<input>`, `<textarea>`, or `<select>`, combined with JavaScript event listeners to capture and process user input dynamically.</p> <p><b>How do I validate user input in JavaScript?</b><br /> You can validate input by checking the input value against specific criteria using conditional statements, regular expressions, or built-in validation methods before processing or submitting the data.</p> <p><b>Is it possible to get user input asynchronously in JavaScript?</b><br /> Yes, by attaching event listeners to input elements, you can capture user input asynchronously as it is entered, enabling real-time validation or dynamic updates without blocking the main thread.</p> <p><b>What is the difference between `input` and `change` events for user input?</b><br /> The `input` event triggers immediately whenever the value of an input element changes, while the `change` event fires only when the element loses focus after its value has been modified.<br /> In summary, obtaining user input in JavaScript is a fundamental aspect of creating interactive web applications. The most common methods include using built-in functions like `prompt()`, capturing input from HTML form elements such as `<input>`, `<textarea>`, and `<select>`, and handling events like `change` or `submit` to process the data entered by users. Each approach serves different use cases, from simple alert-style input collection to more complex form validation and dynamic user interfaces.</p> <p>It is important to understand the context and requirements of your application when choosing the method for gathering user input. For quick and straightforward input, the `prompt()` function offers a simple solution, though it lacks customization and control. For more robust and user-friendly experiences, leveraging HTML forms combined with JavaScript event listeners provides greater flexibility, allowing developers to validate, manipulate, and respond to user data effectively.</p> <p>Ultimately, mastering how to get user input in JavaScript empowers developers to build responsive and engaging web applications. By combining proper input elements, event handling, and validation techniques, developers can ensure that user interactions are captured accurately and processed securely, enhancing both functionality and user experience.</p> <section class="padSection" id="padSection"><h4 class="padSectionTitle">Author Profile</h4><div id="avatar" class="avatar square"><img decoding="async" src="https://agirlamonggeeks.com/wp-content/uploads/2025/07/Barbara-Hernandez-150x150.jpg" srcset="https://agirlamonggeeks.com/wp-content/uploads/2025/07/Barbara-Hernandez.jpg 2x" width="100" height="100" alt="Avatar" class="avatar avatar-100 wp-user-avatar wp-user-avatar-100 photo avatar-default" /></div><!-- [ /#avatar ] --><dl id="profileTxtSet" class="profileTxtSet"> <dt> <span id="authorName" class="authorName">Barbara Hernandez</span></dt><dd> Barbara Hernandez is the brain behind A Girl Among Geeks a coding blog born from stubborn bugs, midnight learning, and a refusal to quit. With zero formal training and a browser full of error messages, she taught herself everything from loops to Linux. Her mission? Make tech less intimidating, one real answer at a time. <br /> <br /> Barbara writes for the self-taught, the stuck, and the silently frustrated offering code clarity without the condescension. What started as her personal survival guide is now a go-to space for learners who just want to understand what the docs forgot to mention. </dd></dl><div id="latestEntries"> <h5 class="latestEntriesTitle">Latest entries</h5> <ul class="entryList"> <li class="textList"><span class="padDate">July 5, 2025</span><a class="padCate" style="background-color:#999999" href="https://agirlamonggeeks.com/category/wordpress/">WordPress</a><a href="https://agirlamonggeeks.com/how-to-speed-up-your-wordpress-website-10-proven-techniques/" class="padTitle">How Can You Speed Up Your WordPress Website Using These 10 Proven Techniques?</a></li> <li class="textList"><span class="padDate">July 5, 2025</span><a class="padCate" style="background-color:#999999" href="https://agirlamonggeeks.com/category/python/">Python</a><a href="https://agirlamonggeeks.com/should-i-learn-c-or-python/" class="padTitle">Should I Learn C++ or Python: Which Programming Language Is Right for Me?</a></li> <li class="textList"><span class="padDate">July 5, 2025</span><a class="padCate" style="background-color:#999999" href="https://agirlamonggeeks.com/category/hardware-issues-and-recommendations/">Hardware Issues and Recommendations</a><a href="https://agirlamonggeeks.com/is-xfx-a-good-gpu-brand/" class="padTitle">Is XFX a Reliable and High-Quality GPU Brand?</a></li> <li class="textList"><span class="padDate">July 5, 2025</span><a class="padCate" style="background-color:#999999" href="https://agirlamonggeeks.com/category/stack-overflow-queries/">Stack Overflow Queries</a><a href="https://agirlamonggeeks.com/spark-string-to-timestamp-module/" class="padTitle">How Can I Convert String to Timestamp in Spark Using a Module?</a></li> </ul> </div> </section></div><!-- .entry-content --> </div> </article><!-- #post-2766 --> <nav class="navigation post-navigation" aria-label="Posts"> <h2 class="screen-reader-text">Post navigation</h2> <div class="nav-links"><div class="nav-previous"><a href="https://agirlamonggeeks.com/how-to-kill-all-docker-containers/" rel="prev"><div class="post-navigation-sub"><small><span class="kadence-svg-iconset svg-baseline"><svg aria-hidden="true" class="kadence-svg-icon kadence-arrow-left-alt-svg" fill="currentColor" version="1.1" xmlns="http://www.w3.org/2000/svg" width="29" height="28" viewBox="0 0 29 28"><title>Previous</title><path d="M28 12.5v3c0 0.281-0.219 0.5-0.5 0.5h-19.5v3.5c0 0.203-0.109 0.375-0.297 0.453s-0.391 0.047-0.547-0.078l-6-5.469c-0.094-0.094-0.156-0.219-0.156-0.359v0c0-0.141 0.063-0.281 0.156-0.375l6-5.531c0.156-0.141 0.359-0.172 0.547-0.094 0.172 0.078 0.297 0.25 0.297 0.453v3.5h19.5c0.281 0 0.5 0.219 0.5 0.5z"></path> </svg></span>Previous</small></div>How Can I Kill All Docker Containers Quickly and Safely?</a></div><div class="nav-next"><a href="https://agirlamonggeeks.com/is-prime-function-in-python/" rel="next"><div class="post-navigation-sub"><small>Next<span class="kadence-svg-iconset svg-baseline"><svg aria-hidden="true" class="kadence-svg-icon kadence-arrow-right-alt-svg" fill="currentColor" version="1.1" xmlns="http://www.w3.org/2000/svg" width="27" height="28" viewBox="0 0 27 28"><title>Continue</title><path d="M27 13.953c0 0.141-0.063 0.281-0.156 0.375l-6 5.531c-0.156 0.141-0.359 0.172-0.547 0.094-0.172-0.078-0.297-0.25-0.297-0.453v-3.5h-19.5c-0.281 0-0.5-0.219-0.5-0.5v-3c0-0.281 0.219-0.5 0.5-0.5h19.5v-3.5c0-0.203 0.109-0.375 0.297-0.453s0.391-0.047 0.547 0.078l6 5.469c0.094 0.094 0.156 0.219 0.156 0.359v0z"></path> </svg></span></small></div>Is There a Built-In Prime Function in Python?</a></div></div> </nav> </div> </main><!-- #main --> <aside id="secondary" role="complementary" class="primary-sidebar widget-area sidebar-slug-sidebar-primary sidebar-link-style-normal"> <div class="sidebar-inner-wrap"> <section id="srpw_widget-2" class="widget widget_smart_recent_entries smart_recent_posts"><h2 class="widget-title">You Can Also Read</h2><div class="srpw-block srpw-default-style "><style>.srpw-img { width: 60px; height: 60px; }</style><ul class="srpw-ul"><li class="srpw-li srpw-clearfix"><div class="srpw-content"><a class="srpw-title" href="https://agirlamonggeeks.com/does-em-change-with-browser-accessibility/" target="_blank">Does the ’em’ Unit Change with Browser Accessibility Settings?</a><div class="srpw-meta"></div></div></li><li class="srpw-li srpw-clearfix"><div class="srpw-content"><a class="srpw-title" href="https://agirlamonggeeks.com/mui-datagrid-check-if-grid-is-finished-re-rendering/" target="_blank">How Can I Check If Mui DataGrid Has Finished Re-Rendering?</a><div class="srpw-meta"></div></div></li><li class="srpw-li srpw-clearfix"><div class="srpw-content"><a class="srpw-title" href="https://agirlamonggeeks.com/what-does-while-true-mean-in-python/" target="_blank">What Does While True Mean in Python and How Is It Used?</a><div class="srpw-meta"></div></div></li><li class="srpw-li srpw-clearfix"><div class="srpw-content"><a class="srpw-title" href="https://agirlamonggeeks.com/how-to-combine-two-dictionaries-python/" target="_blank">How Can You Combine Two Dictionaries in Python?</a><div class="srpw-meta"></div></div></li><li class="srpw-li srpw-clearfix"><div class="srpw-content"><a class="srpw-title" href="https://agirlamonggeeks.com/arithmetic-overflow-error-converting-nvarchar-to-data-type-numeric/" target="_blank">How Can I Fix the Arithmetic Overflow Error When Converting NVarchar to Numeric Data Type?</a><div class="srpw-meta"></div></div></li><li class="srpw-li srpw-clearfix"><div class="srpw-content"><a class="srpw-title" href="https://agirlamonggeeks.com/how-to-install-calico-in-kubernetes/" target="_blank">How Do You Install Calico in Kubernetes Step by Step?</a><div class="srpw-meta"></div></div></li><li class="srpw-li srpw-clearfix"><div class="srpw-content"><a class="srpw-title" href="https://agirlamonggeeks.com/error-socket-hang-up-postman/" target="_blank">Why Am I Getting the Error: Socket Hang Up in Postman?</a><div class="srpw-meta"></div></div></li><li class="srpw-li srpw-clearfix"><div class="srpw-content"><a class="srpw-title" href="https://agirlamonggeeks.com/json-string-to-json-object-in-java/" target="_blank">How Can I Convert a JSON String to a JSON Object in Java?</a><div class="srpw-meta"></div></div></li><li class="srpw-li srpw-clearfix"><div class="srpw-content"><a class="srpw-title" href="https://agirlamonggeeks.com/sql-search-for-text-in-stored-procedures/" target="_blank">How Can I Search for Specific Text Within SQL Stored Procedures?</a><div class="srpw-meta"></div></div></li><li class="srpw-li srpw-clearfix"><div class="srpw-content"><a class="srpw-title" href="https://agirlamonggeeks.com/wordpress-htaccess-redirect-with-path-in-tact/" target="_blank">How Can I Set Up a WordPress .htaccess Redirect That Keeps the Path Intact?</a><div class="srpw-meta"></div></div></li></ul></div><!-- Generated by http://wordpress.org/plugins/smart-recent-posts-widget/ --></section> </div> </aside><!-- #secondary --> </div> </div><!-- #primary --> </div><!-- #inner-wrap --> <footer id="colophon" class="site-footer" role="contentinfo"> <div class="site-footer-wrap"> <div class="site-bottom-footer-wrap site-footer-row-container site-footer-focus-item site-footer-row-layout-standard site-footer-row-tablet-layout-default site-footer-row-mobile-layout-default" data-section="kadence_customizer_footer_bottom"> <div class="site-footer-row-container-inner"> <div class="site-container"> <div class="site-bottom-footer-inner-wrap site-footer-row site-footer-row-columns-1 site-footer-row-column-layout-row site-footer-row-tablet-column-layout-default site-footer-row-mobile-column-layout-row ft-ro-dir-row ft-ro-collapse-normal ft-ro-t-dir-default ft-ro-m-dir-default ft-ro-lstyle-plain"> <div class="site-footer-bottom-section-1 site-footer-section footer-section-inner-items-1"> <div class="footer-widget-area site-info site-footer-focus-item content-align-center content-tablet-align-default content-mobile-align-default content-valign-default content-tablet-valign-default content-mobile-valign-default" data-section="kadence_customizer_footer_html"> <div class="footer-widget-area-inner site-info-inner"> <div class="footer-html inner-link-style-normal"><div class="footer-html-inner"><p>© 2025 A Girl Among Geeks</p> </div></div> </div> </div><!-- .site-info --> </div> </div> </div> </div> </div> </div> </footer><!-- #colophon --> </div><!-- #wrapper --> <script>document.documentElement.style.setProperty('--scrollbar-offset', window.innerWidth - document.documentElement.clientWidth + 'px' );</script> <script type="speculationrules"> {"prefetch":[{"source":"document","where":{"and":[{"href_matches":"\/*"},{"not":{"href_matches":["\/wp-*.php","\/wp-admin\/*","\/wp-content\/uploads\/*","\/wp-content\/*","\/wp-content\/plugins\/*","\/wp-content\/themes\/kadence\/*","\/*\\?(.+)"]}},{"not":{"selector_matches":"a[rel~=\"nofollow\"]"}},{"not":{"selector_matches":".no-prefetch, .no-prefetch a"}}]},"eagerness":"conservative"}]} </script> <div id="mobile-drawer" class="popup-drawer popup-drawer-layout-sidepanel popup-drawer-animation-fade popup-drawer-side-right" data-drawer-target-string="#mobile-drawer" > <div class="drawer-overlay" data-drawer-target-string="#mobile-drawer"></div> <div class="drawer-inner"> <div class="drawer-header"> <button class="menu-toggle-close drawer-toggle" aria-label="Close menu" data-toggle-target="#mobile-drawer" data-toggle-body-class="showing-popup-drawer-from-right" aria-expanded="false" data-set-focus=".menu-toggle-open" > <span class="toggle-close-bar"></span> <span class="toggle-close-bar"></span> </button> </div> <div class="drawer-content mobile-drawer-content content-align-left content-valign-top"> <div class="site-header-item site-header-focus-item site-header-item-mobile-navigation mobile-navigation-layout-stretch-false" data-section="kadence_customizer_mobile_navigation"> <nav id="mobile-site-navigation" class="mobile-navigation drawer-navigation drawer-navigation-parent-toggle-false" role="navigation" aria-label="Primary Mobile Navigation"> <div class="mobile-menu-container drawer-menu-container"> <ul id="mobile-menu" class="menu has-collapse-sub-nav"><li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-home menu-item-33"><a href="https://agirlamonggeeks.com/">Home</a></li> <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-34"><a href="https://agirlamonggeeks.com/about/">About</a></li> <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-36"><a href="https://agirlamonggeeks.com/privacy-policy/">Privacy Policy</a></li> <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-35"><a href="https://agirlamonggeeks.com/contact/">Contact</a></li> </ul> </div> </nav><!-- #site-navigation --> </div><!-- data-section="mobile_navigation" --> </div> </div> </div> <script id="kadence-navigation-js-extra"> var kadenceConfig = {"screenReader":{"expand":"Child menu","expandOf":"Child menu of","collapse":"Child menu","collapseOf":"Child menu of"},"breakPoints":{"desktop":"1024","tablet":768},"scrollOffset":"0"}; </script> <script src="https://agirlamonggeeks.com/wp-content/themes/kadence/assets/js/navigation.min.js?ver=1.2.27" id="kadence-navigation-js" async></script> </body> </html>