Develop Reference

Jquery - getting ID of DIV element clicked

The following works fine and the ID of the button is displayed:
<input class="edit" type="button" value="Edit" id="button1">
SCRIPT
$(".edit").click (function(){
var buttonID = $(this).attr('id');
alert(buttonID);
}
But this does not with the ID buttonID as undefined:
<div id="button1" onclick="pickedID()">Edit</div>
SCRIPT
function pickedID() {
var buttonID = $(this).attr('id');
alert(buttonID);
}
Why is this is and is there a way of getting the Div ID as I am trying to do?

You have to add this to the function when you call it, as in <div id="button1" onclick="pickedID(this)">Edit</div>
Then we can use it as below:
function pickedID(obj) {
var buttonID = $(obj).attr('id');
alert(buttonID);
}
So in this case, obj in function pickedID(obj) refers to this from onclick="pickedID(this)"
demo
function pickedID(obj) {
var buttonID = $(obj).attr('id');
alert(buttonID);
}
$(".edit").click(function(){
var buttonID = $(this).attr('id');
alert(buttonID);
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input class="edit" type="button" value="Edit" id="button1">
<div id="button2" onclick="pickedID(this)">Edit</div>

I would suggest you to not use inline onclick handler. Much better to assign event handlers using jQuery.
$('#button1').on('click', function(){
console.log($(this).attr('id'));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="button1">Edit</div>

With onclick, it doesn't give you direct access to the attributes using this.
You can use event which will give you the mouse event handled and then you can retrieve the id.
In your case:
function pickedID() {
var buttonID = event.srcElement.id;
console.log(buttonID);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="button1" onclick="pickedID()">Edit</div>
Or you can pass the id directly into the function:
function pickedID(id) {
console.log(id);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="button1" onclick="pickedID(this.id)" data-id="2">Edit</div>

use of if condition in a chat box

I just don't know how to use IF condition here i use bubble chat too ,so when the textfield is empty the bubble chat gets updated without any texts.i don't want it.So how to use IF condition for it properly.
window.onload = function() {
document.getElementById("myText").focus();
};
function typo(){
var currentText = document.getElementById("demo").innerHTML;
var x = '<div><p class=bubble>' + document.getElementById("myText").value + '</p></div>';
document.getElementById("myText").value = "";
var y = document.getElementById("demo").innerHTML = currentText + x;
var z = document.getElementById('demo');
z.scrollTop = z.scrollHeight;
}
var input = document.getElementById("myText");
input.addEventListener("keyup", function(event) {
event.preventDefault();
if (event.keyCode === 13) {
document.getElementById("btn-chat").click();
}
});
<div class="container">
<div class="row">
<div class="panel panel-primary">
<div class="panel-heading">
<span class="glyphicon glyphicon-comment"></span> Chat
<div class="btn-group"></div>
</div>
</div>
</div>
<div class="bottom">
<p id="demo"></p>
<input class="widebox" type="text" id="myText" value="">
<button onclick="typo()" class="btn btn-warning btn-sm" id="btn-chat">Send</button>
</div>
</div>
here's the demo fiddle here

You can check to make sure there is at least a length of 1 char.
After looking at your demo you added, you can also make sure white space is gone by using trim() to check.
if (event.keyCode === 13 && input.value.trim().length > 0) {
https://jsfiddle.net/kkjbryqe/8/

if (event.keyCode === 13 && input.value.length)... could work?

i posted a demo in fiddle below my question ..So that i can be more clear of what am doing and thanks everyone for the time to look through my question and helping me out.I really appreciate

Pass js var into html block being added via appendTo

I've got this html which i'm injecting into the page when someone clicks a button. The html gets appended again each time the button is clicked using the js below.
<div style="display: none;">
<div class="grab-me">
<p>This is fieldset 1</p>
<input name="foo[]" />
<input name="bar[]" />
<input name="oth[]" />
</div>
</div>
var count = 1;
$(function(){
$('.add-member').live("click", function(e){
e.preventDefault(e);
count += 1;
var grab = $('.grab-me')
.clone()
.removeClass('grab-me')
.appendTo('#register');
});
});
But what i need to do is where it says "This is fieldset 1" i need to increase that number by 1 each time so subsequent appends say This is fieldset 2, This is fieldset 3 etc etc. I can't see how i can pass a variable (my count var) in to the html block when it gets cloned that will replace that number.
Here is a jsfiddle of it: http://jsfiddle.net/tzbgA/
Any help would be great! Thanks!!

you can give the sentence you want to change class. Then using jQuery selectors change the text inside it.
<body>
<button class="add-member">add more</button>
<div style="display: none;">
<div class="grab-me">
<p class="count">This is fieldset 1</p>
<input name="foo[]" />
<input name="bar[]" />
<input name="oth[]" />
</div>
</div>
<div id="register">
</div>
</body>
var count = 1;
$(function(){
$('.add-member').on("click", function(e){
e.preventDefault(e);
var grab = $('.grab-me')
.clone()
.removeClass('grab-me')
.appendTo('#register')
.find('p.count').html('This is fieldset '+count);
count += 1;
});
});

add span:
<p>This is fieldset <span>1</span></p>
var count = 1;
$(function(){
$('.add-member').on("click", function(e){
e.preventDefault(e);
count += 1;
var grab = $('.grab-me')
.clone()
.removeClass('grab-me')
.appendTo('#register');
$('.span').html('count');
});
});

var count = 1;
$(function(){
$('.add-member').live("click", function(e){
e.preventDefault(e);
count += 1;
var grab = $('.grab-me').clone();
$(grab p).html('This is fieldset '+count).appendTo('#register');
});
});

Fiddle: http://jsfiddle.net/howderek/tzbgA/2/
Here's a version that uses 8 lines of code:
Code (Javascript)
var count = 1,
html = ' <p>This is fieldset #</p><input name="foo[]"/> <input name = "bar[]"/> <input name = "oth[]"/>';
$(function () {
$('.add-member').live("click", function (e) {
e.preventDefault(e);
document.getElementById("register").innerHTML += html.replace("#",++count);
});
});

If class also is class then.. move active class on click

(New at jQuery)
Trying to write a function that moves an active class along as an arrow is clicked..
html
<div id="steps">
<a href="#1" data-ref="dynamic-tabs slider-id">
<div class="step step-1 active">
<div class="step-img">
<img width="175" height="120" src="http://site.com/img.png">
</div>
<div class="step-title">Schedule Online or Wave Down a Biker</div>
<div class="step-over"></div>
</div>
</a>
<a href="#2" data-ref="dynamic-tabs slider-id">
<div class="step step-2">
<div class="step-img">
<img width="175" height="120" src="http://site.com/img.png">
</div>
<div class="step-title">We Bike to & Clean Your Car</div>
<div class="step-over"></div>
</div>
</a>
<a href="#3" data-ref="dynamic-tabs slider-id">
<div class="step step-3">
<div class="step-img">
<img width="175" height="120" src="http://site.com/img.png">
</div>
<div class="step-title">Come Back to a Clean Car</div>
<div class="step-over"></div>
</div>
</a>
</div>
<div class="nav-right" data-dir="next" title="Slide right">
right »
</div>
jQuery I'm trying
$(".nav-right a").click(function() {
if( $(".step-1").is('.active') ) {
$(".step-1").removeClass("active");
$(".step-2").addClass("active");
}
});
$(".nav-right a").click(function() {
if( $(".step-2").is(".active") ) {
$(".step-2").removeClass("active");
$(".step-3").addClass("active");
}
});
$(".nav-right a").click(function() {
if( $(".step-3").is(".active") ) {
$(".step-3").removeClass("active");
$(".step-1").addClass("active");
}
});

The problem seems to be that you create 3 (sic!) event handlers which fire sequentially when you click the link.
The first handler, as step 1 is active, sets step 2 to active.
The second handler, as step 2 is now active, sets step 3 to active
The third handler, as step 3 is now active, sets step 1 to active again.
In the end, nothing has happened.
Solution: Use only one event handler, and if-else-statements instead of only if-statements:
$(".nav-right a").click(function() {
if( $(".step-1").is('.active') ) {
$(".step-1").removeClass("active");
$(".step-2").addClass("active");
} else if( $(".step-2").is(".active") ) {
$(".step-2").removeClass("active");
$(".step-3").addClass("active");
} else if( $(".step-3").is(".active") ) {
$(".step-3").removeClass("active");
$(".step-1").addClass("active");
}
});
Of course, we can do much better and write a generic function, which also does not need the step-N classes:
var rotatedElements = $(".step");
$(".nav-right a").click(function() {
var cur = rotatedElements.filter(".active");
cur.removeClass("active");
var index = rotatedElements.index(cur) + 1;
if (index >= rotatedElements.length)
index = 0;
rotatedElements.eq(index).addClass("active");
});

As suggested in comment by theScientist you should use only one event handler.
$(".nav-right a").click(function() {
if( $(".step-1").is('.active') ) {alert('1');
$(".step-1").removeClass("active");
$(".step-2").addClass("active");
return;
}
if( $(".step-2").is(".active") ) {alert('2');
$(".step-2").removeClass("active");
$(".step-3").addClass("active"); return;
}
if( $(".step-3").is(".active") ) {alert('3');
$(".step-3").removeClass("active");
$(".step-1").addClass("active"); return;
}
});

Here it is in a single handler and about as concise as I can make it :
$(".nav-right a").click(function() {
var $steps = $(".step"),
index = $steps.filter('.active').removeClass("active").index();
$steps.eq((index + 1) % $steps.length).addClass('active');
});

There's a couple of problems here, but to address the question you could simplify your code to just this and remove the dependency on .step1, .step2, etc in case you decide to add more steps.
$('.nav-right').find('a').on('click', function(e) {
e.preventDefault();
var $activeStep = $('.step.active'),
$expectedNextStep = $activeStep.closest('a').next().find('.step'),
$nextActiveStep = $expectedNextStep.length ? $expectedNextStep : $('.step').first();
$activeStep.removeClass('active');
$nextActiveStep.addClass('active');
});
​
However; I would highly recommend putting this in an ordered list, and not wrapping block elements in an anchor. The page will work as you have it but it's just poor semantics.

Using JQuery how to show and hide different div's onClick event

I would like to show a div based on the Onclick event of an link.
First Click - Show div1
Second Click - Hide remaining div's and Show div2
Third Click - Hide remaining div's and show div3
Fourth Click - Hide remaining div's and show div1 => repeat the loop and goes on..
Code Follows:
<div class="toggle_button">
Toggle
</div>
<div id='div1' style="display:none;">
<!-- content -->
</div>
<div id='div2' style="display:none;">
<!-- content -->
</div>
<div id='div3' style="display:none;">
<!-- content -->
</div>
Jquery Code :
$(document).ready(function() {
$("#toggle_value").click(function(){
$("#div1").show("fast");
$("#div2").show("fast");
$("#div3").show("fast");
});
});
The above code shows all divs on first click itself but it should show div1 on first click as mentioned.

I'll try my shot.
EDIT:
After second though, to avoid global variable use it's better to do the following
$(document).ready(function() {
$("#toggle_value").click((function(){
var counter = 0;
return function()
{
$("#div" + counter).hide("fast");
counter = (counter % 3) + 1;
$("#div" + counter).show("fast");
}
})());
});

You should add a counter in the function.
$(document).ready(function() {
var count = 0;
$("#toggle_value").click(function(){
if (count == 0) {
$("#div1").show("fast");
$('#div2').hide();
count++;
}
else if (count == 1) {
$("#div2").show("fast");
...
count++;
}
else if (count == 2) {
$("#div3").show("fast");
....
count++;
}
else {
$('div').hide();
count=0;
}
});
});

How about this
Working Example here - add /edit to URL to edit the code
$('html').addClass('js'); // prevent hiding divs on DOM ready from 'flashing'
$(function() {
var counter = 1;
$('#toggle_value').click(function() {
$('div','#container')
// to stop current animations - clicking really fast could originally
// cause more than one div to show
.stop()
// hide all divs in the container
.hide()
// filter to only the div in question
.filter( function() { return this.id.match('div' + counter); })
// show the div
.show('fast');
// increment counter or reset to 1 if counter equals 3
counter == 3? counter = 1 : counter++;
// prevent default anchor click event
return false;
});
});
and HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<title>Div Example</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">
body { background-color: #fff; font: 16px Helvetica, Arial; color: #000; }
.display { width:300px; height:200px; border: 2px solid #000; }
.js .display { display:none; }
</style>
</head>
<body>
<div class="toggle_button">
Toggle
</div>
<br/>
<div id='container'>
<div id='div1' class='display' style="background-color: red;">
div1
</div>
<div id='div2' class='display' style="background-color: green;">
div2
</div>
<div id='div3' class='display' style="background-color: blue;">
div3
</div>
<div>
</body>
</html>
This could easily be wrapped up in a plugin

A simple way would be to introduce a variable that tracked clicks, so something like this:
var tracker = 0;
$(document).ready(function() {
$("#toggle_value").click(function(){
if(tracker == 0)
{
$("#div1").show("fast");
}else if(tracker ==1)
etc etc
tracker ++;
});
});

My solution is a little different - I'd do it dependant on the state of the divs at the current time (on click). See below for what I mean by this.
$(document).ready(function() {
$("#toggle_value").click(function(){
if ($("#div1).is(':visible')) { // Second click
// Hide all divs and show d2
$("#div1").hide();
$("#div2").show("fast");
$("#div3").hide();
$("#div4").hide();
} else if ($("#div2").is(':visible')) { // Third click
// follow above example for hiding all and showing div3
} else if ($("#div3").is(':visible')) { // Fouth click
// follow above example for hiding all and showing div1
} else { // first click
// All divs should be hidden first. Show div1 only.
$("#div1").show("fast");
}
});
});
Just to warn you - I have not tested this code :)
Based upon the following for determining visibility: http://docs.jquery.com/Frequently_Asked_Questions#How_do_I_determine_the_state_of_a_toggled_element.3F
Hope it helps

I prefer to use "filter" method and make a little easier work with counter:
(function () {
var divCounter = 0, divs;
$(function () {
divs = $('#div1, #div2, #div3');
$('#toggle_value').click(function (e) {
divs.hide() // hide other divs
.filter(function (index) { return index == divCounter % 3; }) // select appropriate div
.show('fast'); // and show it
divCounter++;
});
});
})();

I would probably do something like: (The following assumes all your <div>s are in a container with id "container")
$(document).ready(function() {
var $allDivs = $("#container > div");
var counter = 0;
$("#container > div").click(function(){
counter = counter < $allDivs.length - 1 ? counter + 1 : 0;
$allDivs.not(":eq("+counter +")").hide("fast");
$allDivs.eq(counter).show("fast");
});
});

The .toggle function in jQuery takes any number of argument functions, so the problem is already solved. See the docs under Events.

$("#toggle_value").click(function()
{
$("#div" + (++c) % 3).show().siblings().hide();
}

var c = 1;
$("#toggle_value").click(function()
{
$("#div" + c).hide("fast");
$("#div" + ++c).show("fast");
if (c > 3) c=1;
});

First You have to add query basic file:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
Then you have to add the following code:
<script type="text/javascript">
$(document).ready(function () {
$("#hide").click(function(){
$(".slider_area").hide(1000);
$("#show").css("display","block");
$("#hide").css("display","none");
});
$("#show").click(function(){
$(".slider_area").show(1000);
$("#show").css("display","none");
$("#hide").css("display","block");
});
});
</script>
Add the code above into the header portion and the code below in the body portion.
<img src="images/hide-banner.png" id="hide" class="link right"/>
<img src="images/show-banner.png" id="show" class="link right dis" />
The code is ready for the different image click for show and hide div.

<div id="div_<%=id>">
</div>
<div id="Hide_<%=id>" style="display:none;">
</div>
<div id="div_<%=id>">
</div>
<div id="Hide_<%=id>" style="display:none;">
</div>
<div id="div_<%=id>">
</div>
<div id="Hide_<%=id>" style="display:none;">
</div>
<div id="div_<%=id>">
</div>
<div id="Hide_<%=id>" style="display:none;">
</div>
<script>
var temp = 0;
var temp1 = 0;
$("#div_<%=id>").click(function(){
if (temp1 == 0) {
$('#' + temp).hide();
temp = 'Hide_<%=id>';
$('#Hide_<%=id>').show();
temp1 = 1;
}
else{
$('#' + temp).hide();
temp = 'Hide_<%=id>';
$('#Hide_<%=id>').show();
temp1 = 0;
}
});
</script>