This question already has answers here:
Best way to get child nodes
(5 answers)
Getting a random value from a JavaScript array
(28 answers)
Closed 20 days ago.
I added EventListener via Javascript and I want to select 1 element after pressing the key. Then I want to change the opacity of this element to 1
I tried to generate random numbers from 1 - 9 and check if they are the same as the element id but it didn't work.
function animate() {
}
document.addEventListener("keydown", function() {
animate()
});
<div class="celok">
<div id="1" class="box">Text</div>
<div id="b" class="box">Text </div>
<div id="c" class="box">text</div>
<div id="d" class="box">Text</div>
<div id="e" class="box">Text</div>
<div id="f" class="box">Text</div>
<div id="g" class="box">Text</div>
<div id="h" class="box">Text</div>
<div id="i" class="box">Text</div>
</div>
You could use querySelectorAll to get all the elements which are not visible (using a class).
Then get a random index of that array and apply the visible class on it to show it in the DOM
function animate() {
const all = document.querySelectorAll('.box:not(.visible)');
if (all.length) {
const rnd = Math.floor(Math.random() * all.length);
all[rnd].classList.toggle('visible');
}
}
document.addEventListener("keydown", function() {
animate()
});
.visible {
opacity:1 !important;
}
.box {
opacity: 0;
}
<div class="celok">
<div id="1" class="box">Text</div>
<div id="b" class="box">Text </div>
<div id="c" class="box">Text</div>
<div id="d" class="box">Text</div>
<div id="e" class="box">Text</div>
<div id="f" class="box">Text</div>
<div id="g" class="box">Text</div>
<div id="h" class="box">Text</div>
<div id="i" class="box">Text</div>
</div>
Related
I've this structure here build from a previous question:
jQuery(document).ready(function($) {
let entries = [jQuery("#row .entry")].map(data => ({
issue: data.children[0].children[0].value,
value: data.children[1].children[0].value
}));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="row">
<div id="entry-wrapper">
<div class="entry">
<div class="text-wrapper">
<input type="text" class="text" value="ABC">
</div>
<div class="value-wrapper">
<input type="text" class="value" value="123">
</div>
</div>
<div class="entry">
<div class="text-wrapper">
<input type="text" class="text" value="DEF">
</div>
<div class="value-wrapper">
<input type="text" class="value" value="456">
</div>
</div>
</div>
</div>
Because of CSS I needed to wrap everything into some divs and wrappers and now I'm unable to get every text and the associated value in my array of objects. What I'm doing wrong?
You shouldn't wrap the jQuery object inside an array. That's setting data to the jQuery collection, not the elements.
jQuery has its own map() method, which you can use to loop over the elements in a collection (note that it takes arguments in the opposite order of Array.prototype.map()). It returns a jQuery object, but you can call .get() to convert that to an ordinary array.
jQuery(document).ready(function($) {
let entries = $("#row .entry").map((i, data) => ({
issue: data.children[0].children[0].value,
value: data.children[1].children[0].value
})).get();
console.log(entries);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="row">
<div id="entry-wrapper">
<div class="entry">
<div class="text-wrapper">
<input type="text" class="text" value="ABC">
</div>
<div class="value-wrapper">
<input type="text" class="value" value="123">
</div>
</div>
<div class="entry">
<div class="text-wrapper">
<input type="text" class="text" value="DEF">
</div>
<div class="value-wrapper">
<input type="text" class="value" value="456">
</div>
</div>
</div>
</div>
To turn a jQuery collection into a standard Array, you should not do:
[jQuery("#row .entry")]
...as this creates an array with just one value, and that value is the jQuery collection.
Instead use the method that jQuery provides for this purpose, i.e. get():
Without a parameter, .get() returns an array of all of the elements
So:
jQuery("#row .entry").get()
You can use the Array.from method to convert the jQuery collection to a JavaScript array.
jQuery(document).ready(function($) {
let entries = Array.from(jQuery("#row .entry")).map(data =>({
issue: data.children[0].children[0].value,
value: data.children[1].children[0].value
})).forEach(el => {
console.log(el);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="row">
<div id="entry-wrapper">
<div class="entry">
<div class="text-wrapper">
<input type="text" class="text" value="ABC">
</div>
<div class="value-wrapper">
<input type="text" class="value" value="123">
</div>
</div>
<div class="entry">
<div class="text-wrapper">
<input type="text" class="text" value="DEF">
</div>
<div class="value-wrapper">
<input type="text" class="value" value="456">
</div>
</div>
</div>
</div>
document.getElementById('btn1').addEventListener("click", function() {
document.getElementById('div2').innerHTML = document.getElementById('hidden-div').innerHTML;
});
document.getElementById('btn2').addEventListener("click", function() {
document.getElementById('div-main').innerHTML = "";
});
<div id="div-main">
<input type="button" name="button1" value="button1" id="btn1">
</div>
<div id="div2">
</div>
<div style="display: none;">
<div id="hidden-div">
<input type="button" name="button2" value="button2" id="btn2">
</div>
</div>
i want to add a button2 on click button1, button2 initially is in a hidden div when i click button1 then button2 comes in div2 but when i click button2 its event doesn't work.
getElementById('hidden-div').innerHTML returns a string, not DOM elements. That string is passed to #div2 and parsed into new DOM elements, meaning the initially bound event is no longer bound on the <input>.
In fact, innerHTML is the common method to copy HTML without any bound events.
To keep the event you have two options:
bind it to #div2 instead of the button
or don't destroy the <input>. Instead, append it using appendChild.
Binding to #div2:
document.getElementById('btn1').addEventListener("click", function() {
document.getElementById('div2').innerHTML = document.getElementById('hidden-div').innerHTML;
});
document.getElementById('div2').addEventListener("click", function() {
document.getElementById('div-main').innerHTML = "";
});
<div id="div-main">
<input type="button" name="button1" value="button1" id="btn1">
</div>
<div id="div2">
</div>
<div style="display: none;">
<div id="hidden-div">
<input type="button" name="button2" value="button2" id="btn2">
</div>
</div>
Using appendChild:
document.getElementById('btn1').addEventListener("click", function() {
let children = document.getElementById('hidden-div').children;
for (let i = 0; i < children.length; i++) {
document.getElementById('div2').appendChild(children[i]);
}
});
document.getElementById('btn2').addEventListener("click", function() {
document.getElementById('div-main').innerHTML = "";
});
<div id="div-main">
<input type="button" name="button1" value="button1" id="btn1">
</div>
<div id="div2">
</div>
<div style="display: none;">
<div id="hidden-div">
<input type="button" name="button2" value="button2" id="btn2">
</div>
</div>
Important note: moving the binding inside the click function means the binding will be done each time #btn1 is clicked. It's not a problem in your case, as you're destroying and recreating the contents of #div2 as well, but if you use the same logic to another construct, which doesn't wipe the contents, you'll bind the same function multiple times, which is dangerous as it may lead to hard to detect bugs.
Here fixed
document.getElementById('btn1').addEventListener("click", function() {
document.getElementById('div2').innerHTML = document.getElementById('hidden-div').innerHTML;
document.getElementById('btn2').addEventListener("click", function() {
document.getElementById('div-main').innerHTML = "";
});
});
<div id="div-main">
<input type="button" name="button1" value="button1" id="btn1">
</div>
<div id="div2">
</div>
<div style="display: none;">
<div id="hidden-div">
<br><br>
<input type="button" name="button2" value="button2" id="btn2">
</div>
</div>
I have a list of Divs which contain an image. When I hover over a div, I want the image to move up (I'm doing this by altering the image css on hover). The issue I'm having is that when I hover over one div, all the images in all divs are changing. Instead, I want the hover effect just to take place on the div I'm hovering over. Here is my current jQuery:
jQuery(document).ready(function($){
screenshotHeight = $('.l_admin-product-screenshot img').height();
$('.l_admin-product').hover(function () {
$('.l_admin-product-screenshot img').css({
top: -screenshotHeight
});
},
function () {
$('.l_admin-product-screenshot img').css({
top: '0'
});
});
});
Here is my html structure:
<div class="l_admin-products">
<div class="l_admin-product" tabindex="0">
<input name="layes-preset-layout" id="layers-preset-layout-skizzar-homepage-1-radio" class="l_admin-hide" type="radio" value="skizzar-homepage-2">
<label for="layers-preset-layout-skizzar-homepage-1-radio">
<input id="layers-preset-layout-skizzar-homepage-1-title" type="hidden" value="Splash Page">
<input id="layers-preset-layout-skizzar-homepage-1-widget_data" type="hidden" value="">
<div class="l_admin-product-screenshot">
<img src="http://demo.skizzar.com/wp-content/themes/pastorious/assets/preset-images/new_homepage21_w515.png" width="320" style="top: 0px;"> </div>
<h3 class="l_admin-product-name" id="skizzar-homepage-2">Splash Page</h3>
<div class="l_admin-product-actions">
<a class="button button-primary customize load-customize" id="layers-generate-preset-layout-skizzar-homepage-1" data-key="layers-preset-layout-skizzar-homepage-1">
Select </a>
</div>
</label>
</div>
<div class="l_admin-product" tabindex="0">
<input name="layes-preset-layout" id="layers-preset-layout-skizzar-homepage-2-radio" class="l_admin-hide" type="radio" value="skizzar-homepage-2">
<label for="layers-preset-layout-skizzar-homepage-2-radio">
<input id="layers-preset-layout-skizzar-homepage-2-title" type="hidden" value="Splash Page">
<input id="layers-preset-layout-skizzar-homepage-2-widget_data" type="hidden" value="">
<div class="l_admin-product-screenshot">
<img src="http://demo.skizzar.com/wp-content/themes/pastorious/assets/preset-images/new_homepage2_w515.png" width="320" style="top: 0px;"> </div>
<h3 class="l_admin-product-name" id="skizzar-homepage-2">Splash Page</h3>
<div class="l_admin-product-actions">
<a class="button button-primary customize load-customize" id="layers-generate-preset-layout-skizzar-homepage-2" data-key="layers-preset-layout-skizzar-homepage-2">
Select </a>
</div>
</label>
</div>
<div class="l_admin-product" tabindex="0">
<input name="layes-preset-layout" id="layers-preset-layout-skizzar-homepage-3-radio" class="l_admin-hide" type="radio" value="skizzar-homepage-3">
<label for="layers-preset-layout-skizzar-homepage-3-radio">
<input id="layers-preset-layout-skizzar-homepage-3-title" type="hidden" value="Splash Page">
<input id="layers-preset-layout-skizzar-homepage-3-widget_data" type="hidden" value="">
<div class="l_admin-product-screenshot">
<img src="http://demo.skizzar.com/wp-content/themes/pastorious/assets/preset-images/new_homepage3_w515.png" width="320" style="top: 0px;"> </div>
<h3 class="l_admin-product-name" id="skizzar-homepage-2">Splash Page</h3>
<div class="l_admin-product-actions">
<a class="button button-primary customize load-customize" id="layers-generate-preset-layout-skizzar-homepage-3" data-key="layers-preset-layout-skizzar-homepage-3">
Select </a>
</div>
</label>
</div>
</div>
$('.l_admin-product').hover(function () {
$this = $(this);
$this.find('.l_admin-product-screenshot > img').css({
top: -screenshotHeight
});
},function () {
$this.find('.l_admin-product-screenshot img').css({
top: '0'
});
});
Try with $this to point current image.
New to jquery. I want to do a slideToggle to accordion collaps and expand a section.
When clicking the header, I want to expand/collapse everything in "#section".
<h3 id="assignments">Assignments</h3>
<div id="section">
Assignment Count <input type="number" name="assignment_count">
</div>
I have the code that works below. But I want to make it generic so that if I have any header I click, it will only collapse the section below it and not all div's with an id of "#section"
$(document).ready(function(){
$("h3").click(function(){
$("#section").slideToggle();
});
});
You can use DOM traversal to achieve this. In the click handler for the h3, the next() function can be used to retrieve the following element. Try this:
$('h3').click(function() {
$(this).next('div').slideToggle();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h3>Assignments</h3>
<div>
Assignment Count
<input type="number" name="assignment_count">
</div>
<h3>Foo</h3>
<div>
Foo Count
<input type="number" name="foo_count">
</div>
<h3>Bar</h3>
<div id="section">
Bar Count
<input type="number" name="bar_count">
</div>
You can use .next() which gets the immediately following sibling.
$(document).ready(function(){
$("h3").click(function(){
$(this).next("#section").slideToggle();
});
});
Also, since you want to make it generic do not use IDs. Use classes instead. Something like this
<h3 class="assignments">Assignments</h3>
<div class="section">
Assignment Count <input type="number" name="assignment_count">
</div>
$("h3").click(function(){
$(this).next(".section").slideToggle();
});
$("h3").click(function() {
$(this).next(".section").slideToggle();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h3 class="assignments">Assignments 1</h3>
<div class="section">
Assignment Count
<input type="number" name="assignment_count" />
</div>
<h3 class="assignments">Assignments 2</h3>
<div class="section">
Assignment Count
<input type="number" name="assignment_count" />
</div>
<h3 class="assignments">Assignments 3</h3>
<div class="section">
Assignment Count
<input type="number" name="assignment_count" />
</div>
<h3 class="assignments">Assignments 4</h3>
<div class="section">
Assignment Count
<input type="number" name="assignment_count" />
</div>
using :header you can trigger "on" click event on any header say h1,h2,h3,h4,h5,h6..
$(document).ready(function(){
$(":header").on('click',function(){
$(this).nextUntil(":header").slideToggle();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1 id="assignments1">Assignment1</h1>
<div id="section">
Assignment Count <input type="number" name="assignment_count">
</div>
<h2 id="assignments2">Assignments2</h2>
<div id="section">
Assignment Count <input type="number" name="assignment_count">
</div>
<h3 id="assignments3">Assignments3</h3>
<div id="section">
Assignment Count <input type="number" name="assignment_count">
</div>
In my code i am using six tabs now i want to know which tab is active .one more thing is that each tab call the same function on clicking and i want to check activation tab(either tab1,tab2 ..) on button click which call other function and in that function i want to check active tab below i explain my problem with code
If i say my problem in one line that want to know active tab on clicking button which call javascript function ,function not on tab clicking*
here i m not putting all code of pages but only require code ,Hope you understand my problems and i provide needed code
Thanks in advance
Add.jsp
This is the page on which i am using tabs
<form action="AddInspServlet" method="Post" enctype="multipart/form-data"> <div>
<div id="slider">
<div class="form-step" >
<div class="row">
<div class="form-left">container Number *</div>
<div class="form-right"><input type="text" id="fname" name="contno" class="form-input" onblur="sending(this.value)"/></div>
<div class="form-error"></div>
</div>
<div class="row">
<div class="form-left">Container type *</div>
<div class="form-right"><input type="text" id="lname" name="conttype" disabled="disabled" class="form-input" /></div>
<div class="form-error"></div>
</div>
<div class="row">
<div class="form-left">Inspection type *</div>
<div class="form-right">
<select id="gender" name="insptype">
<option value="0">Select</option>
<option value="Gate In">Gate In</option>
<option value="Gate Out">Gte Out</option>
</select>
</div>
<div class="form-error"></div>
</div>
<div class="row">
<div class="form-left">Place</div>
<div class="form-right"><input type="text" id="places" name="places" class="form-input" /></div>
<div class="form-error"></div>
</div>
</div>
<div class="form-step" >
<div class="form-left1">
<div class="container1">
<ul class="tabs">
<li>Left</li>
<li>Right</li>
<li>Top</li>
<li>Bottom</li>
<li>Front</li>
<li>Rear</li>
</ul>
<div class="tab_container">
<div id="tab1" class="tab_content">
<div id="hidendiv"></div>
<h2>Left Side</h2>
<div id="leftside">
</div>
<input type="file" name="img1" id="img1" onchange="return ValidateFileUpload('img1')" />
</div>
<div id="tab2" class="tab_content">
<h2>Right Side</h2>
<div id="rightside">
</div>
<input type="file" name="img2" id="img2" onchange="return ValidateFileUpload('img2')" />
</div>
<div id="tab3" class="tab_content">
<h2>Top Side</h2>
<div id="topside">
</div>
<input type="file" name="img3" id="img3" onchange="return ValidateFileUpload('img3')" />
</div>
<div id="tab4" class="tab_content">
<h2>Bottom Side</h2>
<div id="bottomside">
</div>
<input type="file" name="img4" id="img4" onchange="return ValidateFileUpload('img4')" />
</div>
<div id="tab5" class="tab_content">
<h2>Front Side</h2>
<div id="frontside">
</div>
<input type="file" name="img5" id="img5" onchange="return ValidateFileUpload('img5')" />
</div>
<div id="tab6" class="tab_content">
<h2>Rear Side</h2>
<div id="rearside">
</div>
<input type="file" name="img6" id="img6" onchange="return ValidateFileUpload('img6')" />
</div>
</div>
</div>
</div>
<div class="form-right1">
<img src="images/noimg.jpg" height="288px" width="400px" id="blah">
</div>
<div style=" width: 200px; margin-top:225px; margin-left:300px">Remarks: <input type="text" width="100px" name="remark"/></div>
</div>
</div>
</div>
<div class= "ash" style="width:auto; margin-left:35%; float: left;">
<input type="submit" name="btn" id="submit" value="AddInspection" onclick="im()" />
<input type="submit" name="btn" value="Cancel"/>
</div>
</form>
JAVA Script function:
This is the function on which i want to know which tab is active that is defined in above jsp
<script type="text/javascript">
function im()
{
/*alert("calling im function");
var tabname = document.getElementById("tab1");
if(tabname){
alert("tab1 is active");
}else{
alert("tab 1 is not active");
}*/
if($('#img1').val()=="" || $('#img2').val()=="" || $('#img3').val()=="" || $('#img4').val()=="" || $('#img5').val()=="" || $('#img6').val()=="")
{
alert("Please select image");
$('#submit').prop('disabled',true);
}
else
{
$('#submit').prop('disabled',false);
}
}
Try like
$('.tab').click(function(){
var a=$(this).attr('id');
$('#sample').html('Active Tab is'+a);
});
Fiddle
you can assign same class to all tab and bind the click function in document ready, you will get the current object by 'this'.
$('.tab').click(function(){
$(this).val();
});
$('.tab').click(function(){
var x=$(this).prop('id');
$('#lbl').html('Active Tab'+ x);
});
I'm new here but you could add a worthless class to the active tab on click, then on the button click retrieve the id or whatever you want.
jQuery
//edit: added function to add and remove class, replaced text to illustrate
$(function () {
$('.tab_content').click(function () {
$('.tab_content').removeClass('active').text('');
$(this).addClass('active').text('am active');
})
$('#button').click(function () {
$('.tab_content').each(function () {
if ($(this).hasClass('active')) {
alert($(this).attr('id')+" is the active tab");
alert($(this).text()+" is the text");
}
});
});
});
html
<div id='1' class='tab_content'>not</div>
<div id='2' class='tab_content active'>am active</div>
<div id='3' class='tab_content'>not</div>
<div id='4' class='tab_content'>not</div>
<button id='button' style='width:50px; height:50px;'>Click</button>
Here is a working fiddle: http://jsfiddle.net/Lv5VJ/2/
I'm sure there are better ways but hey, I'm trying haha.