Click action: two functions, but only the first one seems to be functioning. Feeling frustrated

Here is the HTML code I am using:

<td width="15%" align="center"><input name="submit" type="submit"     class="button" 
   value="Basic" tabindex="13" 
   onclick="return submit_Click('bxbas','bxsht');" /></td>

And below is my JavaScript code:

<script type="text/javascript">
function submit_Click(aclass,bclass) {
  var elementsa = document.getElementsByClassName(aclass);
  for(i in elementsa)
  {
      elementsa[i].style.display = "block";
  } 
  var elementsb = document.getElementsByClassName(bclass);
  for(j in elementsb)
  {
      elementsb[j].style.display = "none";
  }
}
</script>

However, I'm facing an issue with this setup. It seems that only the first part of the function is working as expected, showing the elements with the class 'aclass'. The second part, which should hide the elements with class 'bclass', is not functioning properly.

If anyone has any suggestions or solutions to this problem, I would greatly appreciate it. Thank you!

javascriptfunctionclassstyles

Answer №1

Avoid using For.. In in this scenario. By logging your elementsa, you will notice that the last element is not a number, causing it to break with elementsa[i]. By using a traditional "for" loop, you can resolve this issue:

function onClickSubmit(classA, classB) {
    var elementsA = document.getElementsByClassName(classA);
    for (var i=0; i < elementsA.length; i++) {
        elementsA[i].style.display = "block";
    }
    var elementsB = document.getElementsByClassName(classB);
    for (var j=0; j < elementsB.length; j++) {
        elementsB[j].style.display = "none";
    }
}

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

What is the hostname that npm install directs to?

My task is to set up multiple Node.js packages using npm on a standalone server that does not have direct internet access. I am able to specify an IP Address and port for access. When executing 'npm install' from the command line, where can I f ...

javascriptnode.jsnpm

Exploring Angular 6 with Universal Karma for effective module testing

Issue I have been facing challenges while testing my Angular 6 application with Karma. I am encountering errors such as: Can't bind to 'ngModel' since it isn't a known property of 'mat-select'. Although the import works in ...

javascriptangularkarma-jasmineangular-universal

Experimenting with a function that initiates the downloading of a file using jest

I'm currently trying to test a function using the JEST library (I also have enzyme in my project), but I've hit a wall. To summarize, this function is used to export data that has been prepared beforehand. I manipulate some data and then pass it ...

javascripttypescriptunit-testingtestingjestjs

Can someone explain to me how this AngularJS factory example functions? I have some uncertainty

As a beginner in AngularJS, I am currently studying it through a tutorial and have some questions regarding the use of the factory in Angular. From what I understand, a factory is a pattern that creates objects on request. In the example provided, we see ...

javascriptangularjsjsonjavascript-frameworkangularjs-factory

Is there a way to retrieve the Marker that is being dragged when the event handler has already been bound?

How can I identify the Marker that is being dragged when the handler is a bound function? Take a look at this snippet from my react component: constructor() { this.handleMarkerMove = this.handleMarkerMove.bind(this); } createMarker() { const marker ...

javascriptreactjsgoogle-mapsgoogle-maps-markers

Tips for sharing the scope using module.exports

Within handler.js, I have exported 2 functions: one for initialize() and the other for handle(). The initialize function is used to dynamically load the handler based on the application settings. I have a shared variable called var handler outside the modu ...

javascriptnode.jsexpress

How can I deactivate a Material UI button after it has been clicked once?

Looking to make a button disabled after one click in my React project that utilizes the MUI CSS framework. How can I achieve this functionality? <Button variant="contained" onClick={()=>handleAdd(course)} disabled={isDisabled} > ...

javascriptreactjsmaterial-ui

Learn to leverage JavaScript in Node-RED to dynamically display messages based on selected dropdown options

After reviewing this Node-red flow: https://i.stack.imgur.com/y4aDM.png I am struggling with the implementation in my function. There are 3 options in each dropdown, one for meat type and the other for doneness. Once I select a combination from the drop ...

javascriptnode-red

What is the process of transforming a string into an angular binding?

I have a variable called message that contains the text "you are moving to {{output.number}}". I attempted to insert this into a div element using $("#message").html(message); However, it just displayed the entire string without replacing {{output.number ...

javascriptangularjshtml

Encountering a DiscordAPIError[10062] when attempting to retrieve user points from the database due to an unknown interaction

content: "Congratulations, you have been successfully verified!", ephemeral: true, }); } } else if (interaction.customId === "giverole") { const userPoints = await findUser(interaction.member ...

javascriptnode.jsexpressdiscorddiscord.js

Eliminate repeated elements in a selection using an AngularJS custom directive

I am in the process of creating an events app that utilizes JSON data from Drupal to showcase events using AngularJS within a Drupal module. One of the keys in the JSON object is 'genre', which I'm utilizing in a select dropdown to allow use ...

javascriptangularjsdrupal

The behavior of CSS position: sticky varies depending on whether the user is scrolling up or scrolling down

I am experiencing an issue in my Vue CLI app where a component with the position: sticky CSS property is being partially hidden under the top of the browser when scrolling down, but works correctly when scrolling up. This behavior is also observed on my Ga ...

javascriptcssvue.jscss-positionvuex

Filtering ng-repeat in AngularJs based on nested data properties

Within my data tracking appointments, I have information on months, weeks, days, and timeslots. When it comes to the listing view, displaying "weeks" is unnecessary (although important for other reports). To eliminate days without appointments, I can use ...

javascriptangularjs

Using jQuery to toggle the visibility of a group of radio buttons causes the div to quickly appear and disappear

My code is working perfectly as it shows up when needed and disappears when necessary. The concept behind this form is that the user can check a box, view more required form data related to the checked item, make those fields required, and then uncheck the ...

javascriptjquery

Issue: nodebuffer is incompatible with this platform

Currently, I am attempting to utilize the Shpjs package in order to import a Shape file onto a Leaflet map. According to the Shpjs documentation: shpjs Below is the code snippet I am working with: const [geoData, setGeoData] = useState(null); //stat ...

javascriptreactjsgeojsonshapefilereact-leaflet

Responsive Alignment of Slanted Edges using CSS

I have been working on creating a responsive diagonal layout with slanted shapes (refer to the image attached). However, I'm facing a challenge with aligning the edges smoothly at different screen sizes, especially when the rows grow and the screen re ...

javascripthtmlcssresponsivediagonal

Performing automatic submission of form data without needing to redirect or refresh the page using Javascript

I am trying to find a way to automatically submit form post data without the page redirecting, but I haven't had success with any of the examples I've found that involve jquery and ajax. Currently, my code redirects the page: <!DOCTYPE html& ...

javascriptjqueryhtmlajax

Leveraging summernote in meteor with Discover Meteor tutorial

Recently, I've been delving into the world of Discover Meteor and encountering some challenges along the way. My current hurdle involves integrating content entered in summernote into mongo, but it seems to be more complicated than expected. The fil ...

javascriptjqueryhtmlmongodbmeteor

Adjusting window size when page is resized

While browsing through SO, I stumbled upon this interesting piece of code: var w = window, d = document, e = d.documentElement, g = d.getElementsByTagName('body')[0], x = w.innerWidth || e.clientWidth || g.clientWidth, y = w. ...

javascriptjquerywindowdocumentdocument-body

Prevent the onClick event from being triggered by utilizing JSON data

I am trying to implement a feature where a button click is disabled based on a parameter fetched from a JSON file: JSON Parameter "reactJson": { "disable:"true" } Currently, my onClick method is functioning correctly. However, ...

javascriptjsonreactjs