I have a similar issue to an existing question. The challenge I'm facing is displaying 40 divs without writing repetitive code for each one...
Does anyone have any advice or suggestions on how to tackle this? Thank you in advance. :)
I have a similar issue to an existing question. The challenge I'm facing is displaying 40 divs without writing repetitive code for each one...
Does anyone have any advice or suggestions on how to tackle this? Thank you in advance. :)
Give this a try. Simply replace the id with class.
Following your comment, here are two examples: example 1 and example 2. It seems like what you're looking for is displaying the next div upon selection. If you want to show a specific div, make the following change:
var value=$(this).attr('value'); should be changed to
var value=$(this).attr('value')-1;
$(document).ready(function() {
$('input[type="radio"]').click(function() {
$('.show-me').hide();
var value=$(this).attr('value');
$( ".show-me:eq("+value+")" ).show();
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<form id='form-id'>
<input value='1' name='test' type='radio' />radio1
<input value='2' name='test' type='radio' />radio2
<input value='3' name='test' type='radio' />radio3
<input value='4' name='test' type='radio' />radio4
<input value='5' name='test' type='radio' />radio5<br />
<input value='6' name='test' type='radio' />radio6
<input value='7' name='test' type='radio' />radio7
<input value='8' name='test' type='radio' />radio8
<input value='9' name='test' type='radio' />radio9
<input value='10' name='test' type='radio' />radio10
</form>
<div class='show-me' style='display:none'>Div 1</div>
<div class='show-me' style='display:none'>Div 2</div>
<div class='show-me' style='display:none'>Div 3</div>
<div class='show-me' style='display:none'>Div 4</div>
<div class='show-me' style='display:none'>Div 5</div>
<div class='show-me' style='display:none'>Div 6</div>
<div class='show-me' style='display:none'>Div 7</div>
<div class='show-me' style='display:none'>Div 8</div>
<div class='show-me' style='display:none'>Div 9</div>
<div class='show-me' style='display:none'>Div 10</div>I am facing a challenge with my React components. I have a functional component that handles user input and it is nested within a class component that manages the state containing the input data. The issue arises when I try to implement a function in the c ...
Utilizing the NODE JS module, I have created an HTTP server that responds with a page containing JavaScript code to embed a webpage within an <iframe>. Within this <iframe>, I am trying to access its elements using the getElementsByTagName meth ...
I am currently working on implementing a new contactUs page in my project that includes a form to store data in a mongoDB collection. However, after setting up all the controller and route files and launching the app, I encountered an error that I'm u ...
I successfully created an SVG animation using JSFiddle, but when I transferred the SVG to Shopify, the Javascript that animates the path stopped working. It seems like the issue is with the JavaScript targeting all paths on the page instead of just the sp ...
I am currently working on a Wordle-style game with a 6x6 grid. I'm sending the row as an array through a socket, and while I can check if a letter is correct, I'm having trouble with identifying duplicates that are in the wrong position. I iterat ...
Currently, I am working on creating a responsive menu. The structure of my menu is set up as follows: HTML: <ul id="top-menu"> <li class="active"> <a href="#">HOME</a> </li> <li> <a href="#div2">ABOUT</ ...
My login page involves user authentication through the firebase and sending the request to a servlet. When I click the submit button with correct credentials, the firebase authentication works, the servlet is called but an error is displayed in the browser ...
Can Javascript replicate Smalltalk's doesNotUnderstand or Ruby's method_missing functionality? ...
Currently, I am utilizing Antd for a ReactJs project, however, I have noticed an issue with the rendering of components in the layout. Below is the code snippet: import React from 'react'; export default class Test extends React.Component { ...
I'm struggling with JavaScript and need some help. I have two arrays that I want to convert into a data series, but I'm not sure how. Here are the arrays: colors = ['red', 'green', 'blue']; values = [20, 50, 10 ...
Currently, I am working on an employee appraisal application where users can submit appraisals that are stored in the backend. The initial page is a login screen. Once the user successfully logs in, they should be redirected to another page displaying in ...
Clicking on a question reveals its text, and clicking on another collapses the previous one. The issue arises when trying to close an open question by clicking on it again - it doesn't work as intended due to a potential error in the If statement [im ...
When the mouse hovers over each paragraph within the DIVs with the "change" class, the font color should turn red, and revert back to black when the mouse is not on them. Here's my current code: var paragraphs = document.getElementsByTagName('p& ...
I'm a complete newbie when it comes to yepnope and modernizr. I'm currently experimenting with some examples, but I've come across an issue. When I load jQuery from a third-party CDN, everything works perfectly fine. However, if I try loadin ...
In my code, I have defined two classes. One is called Stuff and the other is called Thing. class Stuff { constructor() { } things: Thing[] = []; name: string; } class Thing { constructor() { } active: boolean; } As I was working on my applicat ...
Sequelize defines two models: Post and Tag, connected by a many-to-many association. Post.belongsToMany(db.Tag, {through: 'post_tag', foreignKey: 'post_id', timestamps: false}); Tag.belongsToMany(db.Post, {through: 'post_tag' ...
I'm currently working on implementing a multiple file upload feature using JavaScript. Within my HTML, I have the following input: <input type="file" (change)="fileChange($event,showFileNames)" multiple /> When the onChange event is triggere ...
As I embark on my journey to learn JavaScript, I decided to tackle some exercises on exercism.io. This platform provides pre-written tests that need to be passed. While things were going smoothly initially, I hit a roadblock with the latest exercise where ...
Is it possible to create a table with only an outer border and exclude the bottom row, so that the bottom border of the second last row gives the appearance of being the final row? I am limited to using CSS as this is on Wordpress and I cannot make changes ...
I wanted to dive into jQuery and decided to recreate the slick animation from Jay-Z's new album commercials. In these ads, a bar slides left over his name while simultaneously disappearing. I also wanted to add a flashing effect by fading out, fading ...