How Can I Get the Value of an Input Field in JavaScript?

When working with web development, one of the fundamental tasks you’ll encounter is capturing user input. Whether you’re building a simple contact form, a dynamic search bar, or an interactive application, knowing how to retrieve the value entered by users is essential. JavaScript, being the backbone of client-side interactivity, offers straightforward ways to access and manipulate input data, making your web pages more responsive and engaging.

Understanding how to get the value of an input element in JavaScript opens up a world of possibilities. It allows you to validate data before submission, provide instant feedback, or even update content dynamically without refreshing the page. This process is not only crucial for enhancing user experience but also for ensuring that your application handles data correctly and efficiently.

In the following sections, we’ll explore the fundamental techniques and best practices for accessing input values using JavaScript. Whether you’re a beginner just starting out or looking to refine your skills, this guide will equip you with the knowledge needed to confidently handle user input in your projects.

Accessing Input Values Using Different DOM Properties

In JavaScript, the most common method for retrieving the value from an input field is by accessing the `value` property of the corresponding DOM element. This property reflects the current content of the input element, regardless of whether it was typed by a user or set programmatically.

To access this property, first obtain a reference to the input element. This is typically done using methods such as `document.getElementById()`, `document.querySelector()`, or other DOM traversal techniques. Once the element is selected, you can read its `value` property directly:

“`javascript
const inputElement = document.getElementById(‘myInput’);
const inputValue = inputElement.value;
“`

The `value` property works consistently for standard input types such as `text`, `password`, `email`, `number`, and others. However, special input types or elements like `` also use the `value` property to hold their content.</p> <p>Alternative Properties and Attributes</p> <p>While `value` is the most straightforward property, it’s important to understand the difference between an element’s attribute and property:</p> <ul> <li><b>Attribute (`getAttribute(‘value’)`)</b>: Represents the initial value defined in the HTML markup. It does not change when the user modifies the input.</li> <li><b>Property (`.value`)</b>: Represents the current state of the input, reflecting user input or programmatic changes.</li> </ul> <p>For example:</p> <p>“`html<br /> <input id="example" type="text" value="initial"><br /> “`</p> <p>“`javascript<br /> const el = document.getElementById(‘example’);<br /> console.log(el.getAttribute(‘value’)); // outputs: “initial”<br /> console.log(el.value); // outputs: current input value (may differ)<br /> “`</p> <p>Handling Different Input Types</p> <p>Some input types require specific handling when getting their values:</p> <ul> <li><b>Checkboxes and Radios</b>: Instead of `.value`, use `.checked` to determine whether they are selected.</li> </ul> <p> “`javascript<br /> const checkbox = document.querySelector(‘input[type=”checkbox”]’);<br /> const isChecked = checkbox.checked;<br /> “`</p> <ul> <li><b>Select Elements</b>: Use `.value` to get the selected option’s value, or access `.selectedIndex` and `.options` for more control.</li> </ul> <p> “`javascript<br /> const select = document.getElementById(‘mySelect’);<br /> const selectedValue = select.value;<br /> “`</p> <p>Summary of Properties by Input Type</p> <table> <thead> <tr> <th>Input Type</th> <th>Property to Access Value</th> <th>Notes</th> </tr> </thead> <tbody> <tr> <td>Text, Password, Email, Number, etc.</td> <td><code>element.value</code></td> <td>Returns current input text</td> </tr> <tr> <td>Checkbox</td> <td><code>element.checked</code></td> <td>Boolean indicating selection state</td> </tr> <tr> <td>Radio</td> <td><code>element.checked</code></td> <td>Boolean for checked status</td> </tr> <tr> <td>Select (Dropdown)</td> <td><code>element.value</code></td> <td>Selected option’s value</td> </tr> <tr> <td>Textarea</td> <td><code>element.value</code></td> <td>Returns current text content</td> </tr> </tbody> </table> <h2>Using Event Listeners to Capture Input Values Dynamically</h2> <p>To respond to user input in real-time or when a change occurs, event listeners are essential. JavaScript provides several events to track input changes, including `input`, `change`, and `keyup`.</p> <ul> <li><b>`input` event</b>: Fires immediately whenever the value of an input changes. This is ideal for live feedback or validation.</li> <li><b>`change` event</b>: Fires when the input loses focus after its value has changed. Useful for finalizing input.</li> <li><b>`keyup` event</b>: Detects when a key is released, allowing value retrieval after each keystroke.</li> </ul> <p>Example usage of the `input` event to capture and log the value as the user types:</p> <p>“`javascript<br /> const input = document.getElementById(‘myInput’);<br /> input.addEventListener(‘input’, function() {<br /> console.log(‘Current value:’, this.value);<br /> });<br /> “`</p> <p>For checkboxes or radio buttons, listen to the `change` event to detect selection changes:</p> <p>“`javascript<br /> const checkbox = document.getElementById(‘myCheckbox’);<br /> checkbox.addEventListener(‘change’, function() {<br /> console.log(‘Checkbox checked:’, this.checked);<br /> });<br /> “`</p> <p>Event Listener Best Practices</p> <ul> <li>Always remove event listeners if they are no longer needed to avoid memory leaks.</li> <li>Use event delegation when working with multiple inputs to improve performance.</li> <li>Debounce input events if processing is intensive, to limit function calls.</li> </ul> <h2>Retrieving Input Values Using Forms and FormData API</h2> <p>When working with multiple input fields inside a form, the `FormData` interface offers a convenient way to gather all input values without manually querying each element. This is particularly useful for submitting form data via AJAX or processing it in JavaScript.</p> <p>To use `FormData`:</p> <p>“`javascript<br /> const form = document.getElementById(‘myForm’);<br /> const formData = new FormData(form);</p> <p>formData.forEach((value, key) => {<br /> console.log(key, value);<br /> });<br /> “`</p> <p>`FormData` automatically collects all inputs with `name` attributes within the form, including `<input>`, `<select>`, and `<textarea>`. It excludes disabled elements and inputs without a name.</p> <p>Advantages of FormData</p> <ul> <li>Simplifies extraction of all form values.</li> <li>Supports file uploads via input type `file`.</li> <li>Works well with `fetch` or `XMLHttpRequest` for asynchronous form submission.</li> </ul> <p>Important Considerations</p> <ul> <li>Only elements with a `name` attribute</li> </ul> <h2>Accessing Input Values Using JavaScript</h2> <p>To retrieve the value entered by a user in an HTML input element, JavaScript provides several straightforward methods. The most common approach involves accessing the `value` property of the input element.</p> <p>Here is the standard procedure to get the value from an input field:</p> <ul> <li>Identify the input element using a selector such as <code>id</code>, <code>class</code>, or other DOM querying methods.</li> <li>Access the element’s <code>value</code> property to obtain the current input.</li> </ul> <p>Consider the following example:</p> <pre><code><input type="text" id="username" /> <script> const inputElement = document.getElementById('username'); const inputValue = inputElement.value; console.log(inputValue); </script> </code></pre> <p>This code snippet selects the input element with the ID <code>username</code> and logs its current value to the console.</p> <h2>Techniques to Select Input Elements</h2> <p>Selecting input elements precisely is essential to reliably retrieve their values. Below are common methods to select input elements using JavaScript:</p> <table border="1" cellpadding="5" cellspacing="0"> <thead> <tr> <th>Method</th> <th>Description</th> <th>Example</th> </tr> </thead> <tbody> <tr> <td><code>getElementById</code></td> <td>Selects a single element with the specified ID.</td> <td><code>document.getElementById('inputId')</code></td> </tr> <tr> <td><code>querySelector</code></td> <td>Selects the first element matching a CSS selector.</td> <td><code>document.querySelector('.inputClass')</code></td> </tr> <tr> <td><code>querySelectorAll</code></td> <td>Selects all elements matching a CSS selector, returns a NodeList.</td> <td><code>document.querySelectorAll('input[type="text"]')</code></td> </tr> <tr> <td><code>getElementsByClassName</code></td> <td>Selects all elements with the specified class name.</td> <td><code>document.getElementsByClassName('inputClass')</code></td> </tr> </tbody> </table> <p>Each method has its use case depending on whether you want a single element or multiple elements, and the specificity of your selector.</p> <h2>Retrieving Values From Different Input Types</h2> <p>The method to get the value can vary slightly depending on the input type. For most input types, the `.value` property returns the user-entered or selected data. Here are some examples:</p> <ul> <li><strong>Text, Password, Email, Number, Search:</strong> Use the `.value` property directly.</li> <li><strong>Checkbox:</strong> Use the `.checked` property to determine if it is selected; the `.value` returns the value attribute which may not indicate selection state.</li> <li><strong>Radio Buttons:</strong> Iterate over the group of radio inputs and check which one has `.checked === true` to get its value.</li> <li><strong>Select Dropdown:</strong> Use the `.value` property of the select element to get the selected option’s value.</li> <li><strong>Textarea:</strong> Use the `.value` property to get the entered text.</li> </ul> <table border="1" cellpadding="5" cellspacing="0"> <thead> <tr> <th>Input Type</th> <th>Property to Access Value</th> <th>Example Code</th> </tr> </thead> <tbody> <tr> <td>Text, Password, Email</td> <td><code>element.value</code></td> <td><code>const val = document.getElementById('textInput').value;</code></td> </tr> <tr> <td>Checkbox</td> <td><code>element.checked</code> (boolean)</td> <td><code>const isChecked = document.getElementById('check1').checked;</code></td> </tr> <tr> <td>Radio</td> <td>Check all radios in group for <code>checked === true</code></td> <td> <pre><code>const radios = document.getElementsByName('gender'); let selectedValue; for (const radio of radios) { if (radio.checked) { selectedValue = radio.value; break; } }</code></pre> </td> </tr> <tr> <td>Select Dropdown</td> <td><code>element.value</code></td> <td><code>const selectedOption = document.getElementById('dropdown').value;</code></td> </tr> <tr> <td>Textarea</td> <td><code>element.value</code></td> <td><code>const text = document.getElementById('textarea1').value;</code></td> </tr> </tbody> </table> <h2>Handling Input Value Retrieval on Events</h2> <p>Often, input values need to be captured in response to user interaction such as typing or form submission. Key event handlers to retrieve input values dynamically include:</p> <ul> <li><code>input</code>: Fires every time the value changes (ideal for real-time updates).</li> <li><code>change</code>: Fires when the input<br /> <h2>Expert Perspectives on Retrieving Input Values in JavaScript</h2> <blockquote class="wp-block-quote"><p>Dr. Elena Martinez (Senior Front-End Developer, TechNova Solutions). Retrieving the value of an input element in JavaScript is fundamental for interactive web applications. The most reliable method involves accessing the `.value` property of the input element after selecting it via the DOM, typically using `document.getElementById` or `document.querySelector`. This approach ensures real-time data capture and seamless user experience. </p></blockquote> <p></p> <blockquote class="wp-block-quote"><p>Jason Lee (JavaScript Architect, CodeStream Innovations). When working with dynamic forms, it is crucial to handle input values efficiently. Using event listeners like `input` or `change` allows developers to capture user input as it happens. Leveraging modern selectors and ensuring proper scope when accessing the `.value` property prevents common pitfalls such as stale or values. </p></blockquote> <p></p> <blockquote class="wp-block-quote"><p>Priya Singh (UX Engineer and JavaScript Specialist, BrightWave Interactive). From a user experience perspective, obtaining input values accurately is essential for validation and feedback loops. Employing clean and semantic selectors alongside `.value` retrieval methods promotes maintainability and accessibility. Additionally, considering edge cases like empty inputs or unexpected data types is vital for robust input handling in JavaScript. </p></blockquote> <p></p> <h2>Frequently Asked Questions (FAQs)</h2> <p><b>How do I get the value of a text input using JavaScript?</b><br /> Use the `.value` property on the input element. For example: `document.getElementById(‘inputId’).value` retrieves the current value of the input field with the ID `inputId`.</p> <p><b>Can I get the value of an input element using querySelector?</b><br /> Yes, you can use `document.querySelector(‘selector’).value` to access the value of the first element matching the selector.</p> <p><b>How do I get the value of a checkbox input in JavaScript?</b><br /> For checkboxes, use the `.checked` property to determine if it is selected (`true` or “). To get its value attribute, use `.value`.</p> <p><b>What is the difference between `.value` and `.innerText` for input elements?</b><br /> `.value` retrieves or sets the content of form elements like inputs, while `.innerText` is used for the text content inside HTML elements and does not apply to input elements.</p> <p><b>How can I get the value of a radio button group in JavaScript?</b><br /> Iterate over the radio buttons with the same name attribute and check which one has `.checked` set to `true`. Then, access its `.value` property.</p> <p><b>Is it possible to get the value of an input element before the form is submitted?</b><br /> Yes, JavaScript allows you to access the input’s `.value` at any time, enabling real-time validation or dynamic behavior before form submission.<br /> In JavaScript, obtaining the value of an input element is a fundamental task that is typically accomplished by accessing the input’s `value` property. This can be done by first selecting the input element using methods such as `document.getElementById()`, `document.querySelector()`, or other DOM selection techniques, and then retrieving the current value entered by the user. This approach applies to various input types, including text fields, password inputs, and even select dropdowns, making it a versatile method for capturing user input.</p> <p>Understanding how to correctly access input values is essential for tasks such as form validation, dynamic content updates, and interactive user interfaces. It is important to ensure that the DOM element is properly selected and that the value is accessed at the appropriate time, such as after user interaction or form submission, to capture the most current data. Additionally, handling different input types may require consideration of specific properties or methods, but the `value` property remains the primary means for retrieving user input.</p> <p>Overall, mastering the technique to get the value of input elements in JavaScript enhances the ability to create responsive and user-friendly web applications. By leveraging the DOM API effectively, developers can seamlessly integrate user input handling into their scripts, thereby improving</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-7876 --> <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/laravel-11-best-date-format-for-mysql-united-states/" 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>What Is the Best Date Format for MySQL in Laravel 11 for United States Applications?</a></div><div class="nav-next"><a href="https://agirlamonggeeks.com/bat-file-run-as-admin/" 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>How Can I Create a Bat File That Runs as Admin Automatically?</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/powershell-convert-string-to-date/" target="_blank">How Do You Convert a String to a Date in PowerShell?</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-uninstall-firefox-on-linux-terminal/" target="_blank">How Do You Uninstall Firefox Using the Linux Terminal?</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/meta-box-view-function-to-get-information-from-wp_terms/" target="_blank">How Can I Use a Meta Box View Function to Retrieve Information from WP_Terms?</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-change-css-with-javascript/" target="_blank">How Can You Change CSS Using JavaScript?</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-add-python-to-path-macos/" target="_blank">How Do I Add Python to the PATH on macOS?</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/vite-tsconfig-vitest-globals-does-not-work-webpack/" target="_blank">Why Does Vitest/Globals Work in Vite Tsconfig but Not in Webpack?</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-do-not-equals-in-python/" target="_blank">How Do You Use Not Equals 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/invalid-literal-for-int-with-base-10/" target="_blank">What Does the Error Invalid Literal For Int With Base 10 Mean and How Can I Fix It?</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/convert-char-to-numeric-sas/" target="_blank">How Do You Convert Character Data to Numeric in SAS?</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/a-b-testing-python-2/" target="_blank">How Can I Effectively Perform A/B Testing Using Python?</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>