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

Guidelines for incorporating Angular variables into jQuery scripts

I have a form with an input field that dynamically generates a list of names using Angular. My goal is to turn each name into a clickable link that will submit the form with that specific name as the input value. <form method="POST" action="/results/" ...

javascriptjqueryangularjsforms

Tips for concealing JavaScript animations beyond specific boundaries?

So I'm delving into the world of javascript/jquery and an amazing idea popped into my head for a webpage effect. Let me break down the design a bit. My website is neatly contained within a wrapper div, ensuring that the content stays at 1000px and ce ...

javascriptjqueryhtmlcsswrapper

I am curious about the significance of the "=>" symbol within the Ionic framework

I utilized the documentation provided on the Ionic website to incorporate Firebase into my mobile application. this.firebase.getToken() .then(token => console.log(`The token is ${token}`)) // store the token server-side and utilize it for sending not ...

javascriptandroidangulartypescriptionic-framework

Switch navigation - always display the menu on the existing page

I have a toggle menu implemented. Please check out the code and functionality on JsFiddle When clicking on a h3 tag like Category 1 (which is an a tag), the menu opens and remains open on the current page. However, if you click on the h3 tag (Category1) ...

javascriptjqueryhtmlcss

Updating Variables Declared in Parent Component from a Child Component in React using NextJS - A Comprehensive Guide

After reviewing the tutorial on React: Reverse Data Flow to update the variables foodObj, input, and buttonClicked declared in the Parent Component file Main.js, using the child component <SearchAndSuggestion>, I encountered an issue. Here is a snipp ...

javascriptreactjsnext.js

Obtaining the value of dynamically generated elements using JavaScript within PHP scripting

Using JavaScript, I dynamically created some textboxes. Below is the JavaScript code: $(document).on('click','#AddHaContactNumberButton',function(e){ e.preventDefault(); var outerDiv = document.getElementById("HaContactDiv"); var textb ...

javascriptphpajax

enabling input field while making asynchronous requests with jQuery

This is the code snippet from my index.php file: <html> <head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="ajax.js"></script> <script> $("input" ...

javascriptphpjqueryajax

Issue encountered in React 18: The value on the left side of an assignment statement must be a variable or a property that can be accessed

After upgrading my React version from 17 to 18, I encountered an error with this code: data?.area?.width=['111','220']. The error message states "The left-hand side of an assignment expression must be a variable or a property access." W ...

javascriptreactjsnext.js

Create a separate server session specifically for handling an ajax request?

Currently, I am working with a collection of PHP server-side scripts that manage user session state by utilizing PHP sessions extensively for authenticated users. For the client side within a mobile application and using Jquery ajax, I am striving to esta ...

phpjavascriptjqueryajaxsession

Issues with Rails comments not displaying properly when using ajax requests

I've implemented ajax comments in my rails app and while I can see the comments are being processed in the console, they're not displaying/rendering on the page. My javascript appears to be functioning correctly, but I'm unsure where the iss ...

javascriptruby-on-railsajaxruby-on-rails-4comments

Encountered an issue while trying to extract data from state - property of null cannot

I'm facing an issue trying to show a navigation item only when a specific flag is true. The problem arises when I attempt to extract data from it, as it returns undefined. Below is the code snippet I have created for this scenario: let navigate = useN ...

javascriptreactjsreact-hooks

The $.each function seems to be stuck and not cycling through the

Dealing with a rather intricate JSON structure, I'm encountering difficulty iterating through it using the $.each() function. It seems to be related to the unusual 2-dimensional array passed in the value section of the standard array (hopefully that m ...

javascriptjsonajax

Extracting every other value from an array can be achieved by iterating through the

Hi, I'm looking to create a function that will log every other value from an array. For example, if we have: var myArray = [1,45,65,98,321,8578,'orange','onion']; I want the console.log output to be 45, 98, 8578, onion... Does ...

javascriptarraysfunction

Having trouble with a lengthy formula in your Google Sheets Apps Script function? You may encounter an error like `SyntaxError: missing ) after argument list line: 14 file: new line.gs`. Let

The Apps Script function being discussed: function insertNewRow() { var ss = SpreadsheetApp.openById("redactedforprivacy"); var sheet = ss.getSheetByName("Main"); sheet.insertRowBefore(2); var date = new Date(); var month = date.getMonth() + 1 ...

javascriptgoogle-apps-scriptgoogle-sheets

Utilize Meteor-tabular to effortlessly export data with convenient HTML5 export buttons

Currently, I am utilizing the tabular package to display data from a collection in a table format. However, when attempting to export the data using html5 export buttons with the button (csvhtml5), only the length of data visible in the table is exported, ...

javascriptnode.jshtmlmeteorexport-to-csv

The difference between emitting and passing functions as props in Vue

Imagine having a versatile button component that is utilized in various other components. Instead of tying the child components to specific functionalities triggered by this button, you want to keep those logics flexible and customizable within each compon ...

javascriptvue.jsvuejs2

Arrange search results using $in array parameter in MongoDB

My challenge involves managing two collections: users and items. Within the user.profile.savedItems array, items are saved in the following format: {"itemId" : "yHud5CWpdPaEc6bdc", "added" : ISODate("2014-09-12T22:28:11.738Z")} My goal is to retrieve ...

javascriptmongodbmeteor

Tips for enhancing the appearance of a React component

I have a redux form that doesn't look great, and I would like to style it. However, my project uses modular CSS loaders. The styling currently looks like this: import styled from 'styled-components'; const Input = styled.input` color: #4 ...

javascriptreactjs

Confirmed the validation of an input that falls outside the parameters of the ReactiveForms model

Check out this StackBlitz example In my Angular application, I am utilizing a Reactive form with 3 inputs, each having its own validation. Additionally, there is an input that exists outside of the form within its own component, also with its own reactive ...

javascriptangularformsangular-reactive-forms

Clicking on a button will allow me to select only a portion of text within a specific cell of

Inside a table, there is a paragraph of text enclosed in a <td></td> element. Take for example the following passage. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard ...

javascripthtmljquery