What is the reason that certain functionalities do not work on an element that has two CSS classes assigned to it

I have a unique situation with two input elements and a button:

<input class="close-acc-usr opt-in" type="text" name="closeAccUsr" />
<input class="close-acc-pin opt-in" type="number" name="closeAccPin" />
<button class="opt-btn close-btn">→</button>

When I click the button, I want both input elements to clear. I tried using this code in the JS event handler function:

document.querySelector('.opt-in').value = '';

However, this code doesn't work as expected. Interestingly, when I replace '.opt-in' with '.close-acc-pin' or '.close-acc-usr', it works perfectly fine. Why does it not work with '.opt-in'?

javascripthtmlcss

Answer №1

Make sure to use the querySelectorAll method to target all input elements:

const button = document.querySelector('.opt-btn')
button.addEventListener('click', function() {
  const inputs = document.querySelectorAll('.opt-in');
  inputs.forEach(input => input.value = '')
})
<input class="close-acc-usr opt-in" type="text" name="closeAccUsr" />
<input class="close-acc-pin opt-in" type="number" name="closeAccPin" />
<button class="opt-btn close-btn">→</button>

Answer №2

Why use two classes for the input when you can simply change the opt-in class to an id like this:

<input id="opt-in" class="close-acc-usr" type="text" name="closeAccUsr" />
→

Then in your Javascript code:

document.querySelector('#opt-in').value = '';

Alternatively, you can also do this:

 document.getElementById('opt-in').value = '';

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Retrieve Wikipedia API JSON information using jQuery

$('#searchButton').click(function(){ var searchInput = ""; searchInput = document.getElementById('test'); if(searchInput.value !== ""){ $.getJSON('https://en.wikipedia.org/w/api.php?action=query&list=search&format ...

javascriptjqueryjsonmediawiki

`Inability to remove item from array in Vue.js`

I've been struggling to understand why this feature isn't functioning as expected. I'm using sample code for reference, but it's not behaving the same way. When I click on the delete button, nothing happens even though it should remove ...

javascriptarraysvue.jsvue-component

Divs are the preferred placeholders over inputs and textareas

For the past few weeks, I have been trying to tackle a problem with creating placeholders that guide users on where to type. My goal is to make these placeholders disappear when users start typing and reappear if the div is empty again. All my attempts so ...

javascriptjqueryplaceholder

Error: The system reference 'Sys' is not defined in ASP.NET

I am trying to implement ajax functionality on the ASP.NET platform. To achieve this, I am using ScriptManager in conjunction with jQuery, and adding the script after the "document is ready" event. $(document).ready(function () { // sync {{scopeN ...

javascriptasp.netajaxscriptmanager

Create your own custom block on the frontend product page

I am trying to create a custom block on the Product Page of my Magento store. I attempted it like this: Magento- How can i add a new custom block in product details page using module Unfortunately, it did not work as expected. Did I make any mistakes he ...

phpjavascriptajaxmagentoproduct

Webpage expands its reach beyond the confines of the HTML element

I've recently added a background gradient to my webpage to make it easier on the eyes, but now I've noticed that the page extends past the <html> element and continues scrolling. This also causes the background gradient to repeat below the ...

htmlcss

Using a combination of Javascript and PHP to dynamically update the innerHTML of multiple elements

I am working on updating the innerHTML of a webpage using Javascript after an onclick event. In my java.js file, I am utilizing this code to access a PHP page that echoes back the text for updating the innerHTML. The issue arises when attempting to update ...

phpjavascriptajax

Utilizing jQuery to apply multiple classes simultaneously?

What is the purpose of allowing multiple classes to be added? Is there any real benefit to this feature or is it just unnecessary complexity? I attempted to utilize it, but found that it serves no practical function. ...

javascriptjquery

Navigating to the next sibling child in Angular 1 using Ui-router transition

I'm trying to figure out how to effectively transition between sibling states using $state.go() in ui-router. Imagine a child state with integer-based URLs: /parent/1, parent/2, parent/3 and so on I want to be able to navigate between these child st ...

javascriptangularjsroutesangular-ui-routerstate

I encounter internal server errors when trying to upload images in React

Attempting to send a post request with an image, but encountering errors without understanding why. const [image, setImage] = useState([]); const handleImage = (event) => { setImage(...Array(event.target.files[0])) } const handleSubmit ...

javascripthtmlreactjsreact-nativereact-redux

Exploring the possibilities of integrating jQuery into Firefox extensions

Can someone provide guidance on effectively implementing jQuery within a Firefox extension? My research has not yielded any up-to-date methods that address the latest version of jQuery, and I am aware that directly including it via script tag may lead to c ...

javascriptjqueryfirefoxfirefox-addonadd-on

Count Scroller - Finding a Solution for _.debounce

Issue with Counter I have a counter that should increase or decrease by one each time the user scrolls up or down. The problem I'm facing is that my counter $('html').on('mousewheel', function (e) { var delta = e.originalEve ...

javascriptjqueryfunctionunderscore.jscounter

Troubleshooting Angular 2: Instances of Classes Not Being Updated When Retrieving Parameters

I am facing an issue with the following code snippet: testFunction() { let params = <any>{}; if (this.searchTerm) { params.search = this.searchTerm; } // change the URL this.router.navigate(['job-search'], {q ...

javascriptangular

Populate your website with both a Bootstrap Popover and Modal for interactive user engagement through hover

Here's the situation: I want to showcase a user's name with a popover that reveals a snippet of their profile information. I've got that part down, where it dynamically generates and displays the popover content as needed. The popover functi ...

javascripthtmlcsstwitter-bootstrapmodal-dialog

Issue with Moment.js amDateFormat consistently displaying date as 1970

Check out this link for more information I've integrated Moment.js and Angular-moment into my application. Oddly enough, all my epoch timestamps are being converted to the same date in 1970. <td class="timespan">{{tag.added_epoch | amDateForm ...

javascriptangularjstimestampmomentjsangular-moment

Updating Angular JS views in real-time using database changes

I am currently in the process of building a social networking application using AngularJS. I have come across an issue regarding data binding. In my app, there is a timeline div where all the recent posts are displayed, along with a status updater at the t ...

javascriptajaxangularjs

What is the process of parsing a Java property file in AngularJS?

Is it possible to access a properties file from an AngularJS application that is located outside of the web server? For example, in Java we can access a property file deployed separately from the project. Is there a way to achieve this in AngularJS? I at ...

javascriptangularjs

Code needed to efficiently include a d3 module through webpack

Having some trouble importing and using a d3 module in my webpack project. The function I need from the module is declared like so: https://github.com/d3/d3-plugins/blob/master/hive/hive.js d3.hive.link = function() { I attempted to follow this guide to ...

javascriptd3.jswebpackimport

Issues with the Jquery feedback plugin's functionality are currently preventing it

I wanted to incorporate a feedback feature into my web application. To do this, I searched on Google and found a suitable jQuery plugin. I followed the documentation provided by the plugin, including the library in my HTML file, and then wrote the code as ...

javascriptjqueryhtml

Guide on how to forward the response obtained from an Ajax call to a different HTML page

I am working with a mongoose database that stores data containing an individual's first and last name. The user inputs their first name into a field, triggering an ajax request sent to the file named controller.js. This file generates a JSON response ...

javascripthtmljsonnode.jsmongoose