How to detect which button is clicked in javascript? - javascript

im trying to figure out how to carry the id of the button when clicked to my function. 1 function to change color on mouseover and one function to change it back to original color when mouseout. i know i can do it simply in css but i just want to learn how to do it in javascript.
Thanks in advance.
Below is my code.
var buttonClass = this.className();
// document.getElementById("mainTitle");
this.style.backgroundColor="#000000";
this.style.color="#ffffff";
this.style.cursor = "pointer";
}
function defaultColor() {
var buttonClasss = this.getElementById();
//document.getElementById("addList");
this.style.backgroundColor = "#ffffff";
this.style.color = "#000000";
this.style.cursor = "pointer";
}
//event listener for Change Title button
document.getElementById("mainTitle").addEventListener("mouseover", changeColor);
document.getElementById("mainTitle").addEventListener("mouseout", defaultColor);
document.getElementById("mainTitle").addEventListener("click", changeTitle);
//event listener for change title ends here
//event listener for add listing
document.getElementById("addList").addEventListener("mouseover", changeColor);
document.getElementById("addList").addEventListener("mouseout", defaultColor);
document.getElementById("addList").addEventListener("click", addListing);
//event listener for add listing ends here
#mainTitle {
border:1px solid #ff33f4;
float:left;
clear:both;
font-family:arial;
font-weight:bold;
font-size:20px;
border-radius:50px;
background-color:#ff33ff;
width:200px;
height:35px;
text-align:center;
padding-top:20px;
padding-bottom:10px;
cursor:pointer;
}
#addList {
border:1px solid #ff33f4;
float:right;
font-family:arial;
font-weight:bold;
font-size:20px;
border-radius:50px;
background-color:#ff33ff;
width:200px;
height:35px;
text-align:center;
padding-top:20px;
padding-bottom:10px;
cursor:pointer;
}
#main {
clear:both;
margin-top:120px;
}
<div id="mainTitle" class="changeTitle">Change Title</div>
<div id="addList" class="addList">Add List</div>

Every event registered will comes with argument Event.
function defaultColor(e) {
// ^ argument (Event)
var currentClickedButton = e.currentTarget; // to get the current clicked button
/* Your code here */
}

When you attach a function to an event, you don't really need to track the id of the element emitting the event, you just need to use the 'this' keyword to access it. Below is a sample of this using your sample code.
<html>
<head>
<style>
#mainTitle {
border:1px solid #ff33f4;
float:left;
clear:both;
font-family:arial;
font-weight:bold;
font-size:20px;
border-radius:50px;
background-color:#ff33ff;
width:200px;
height:35px;
text-align:center;
padding-top:20px;
padding-bottom:10px;
cursor:pointer;
}
#addList {
border:1px solid #ff33f4;
float:right;
font-family:arial;
font-weight:bold;
font-size:20px;
border-radius:50px;
background-color:#ff33ff;
width:200px;
height:35px;
text-align:center;
padding-top:20px;
padding-bottom:10px;
cursor:pointer;
}
#main {
clear:both;
margin-top:120px;
}
</style>
<script type="text/javascript">
function defaultColor() {
//var buttonClasss = this.getElementById();
//document.getElementById("addList");
this.style.backgroundColor = "#ffffff";
this.style.color = "#000000";
this.style.cursor = "pointer";
}
function changeColor(){
this.style.backgroundColor="#000000";
this.style.color="#ffffff";
this.style.cursor = "pointer";
}
function changeTitle(){
}
function addListing(){
}
function OnL(){
//event listener for Change Title button
document.getElementById("mainTitle").addEventListener("mouseover", changeColor);
document.getElementById("mainTitle").addEventListener("mouseout", defaultColor);
document.getElementById("mainTitle").addEventListener("click", changeTitle);
//event listener for change title ends here
//event listener for add listing
document.getElementById("addList").addEventListener("mouseover", changeColor);
document.getElementById("addList").addEventListener("mouseout", defaultColor);
document.getElementById("addList").addEventListener("click", addListing);
}
</script>
</head>
<body onload="OnL()">
<div id="mainTitle" class="changeTitle">Change Title</div>
<div id="addList" class="addList">Add List</div>
</body>
</html>

Related

JavaScript function on page load

I need to change the Div id "Div01" state to "highlight" class when the page loads.
Please see the code below:
HTML:
<div id="div01">user</div>
JS:
var role; function roleActive(obj){ if (role)
role.className = 'btn';
obj.className = 'highlight';
role = obj;}
CSS:
.btn{
display:block;
height:25px;
width:100px;
padding:5px 0px 0px 0px;
text-align:center;
font-size:16px;}
.highlight{
cursor:default;
display:block;
height:25px;
width:100px;
padding:5px 0px 0px 0px;
text-align:center;
font-size:16px;
background-color:#FFF;
border-bottom:4px solid #F0AB00;
color:#000;
text-decoration:underline;}
a.btn:link{background-color:#000;color:#FFF;}
a.btn:visited{background-color:#000;color:#FFF;}
a.btn:hover,active{background-color:#FFF;color:#000;text-decoration:underline; border-bottom:4px solid #F0AB00;}
Kindly help me to fix the problem.
Try
<script>
window.onload = function(){
roleActive(document.getElementById('div01').children[0]);
}
</script>
try this
window.onload = function(){
document.getElementById('div01').className = 'highlight'
}
or
<script>
document.getElementById('div01').className = 'highlight'
</script>
or
<script>
exampleCall();
function exampleCall()
{
document.getElementById('div01').className = 'highlight'
}
</script>
document.addEventListener('DOMContentLoaded', function(){
document.getElementById('div01').className = 'highlight';
}, false);
For Javascript:
window.onload = function() {
document.getElementById('div01').className = 'highlight';
}
For Jquery:
$(function() {
$('#div01').addClass('highlight');
});
Your onclick event is sending 'this' to the function, but it's the onclick event of the , not of the . Is this what you intended?
Since you're not using the inherent click functionality of the then I'd suggest getting rid of it. Just have the click event on the , so clicking it will fire roleActive() and apply the classes appropriately.

javascript onclick create(element) div viz popup box

I'm trying to make a pop up box, which gets invoked on clicking a button, this is what I've got so far.. http://jsfiddle.net/WGPhG/2/
Here is a fiddle that actually does what you want - http://jsfiddle.net/WGPhG/6/
JS
function popUp(){
var popup = document.createElement('div');
popup.className = 'popup';
popup.id = 'test';
var cancel = document.createElement('div');
cancel.className = 'cancel';
cancel.innerHTML = 'close';
cancel.onclick = function (e) { popup.parentNode.removeChild(popup) };
var message = document.createElement('span');
message.innerHTML = "This is a test message";
popup.appendChild(message);
popup.appendChild(cancel);
document.body.appendChild(popup);
}
NOTES
To set the class on an element you use element.className instead of element.class.
For the onclick event handler on the cancel element, it is better to directly assign the onclick handler with an anonymous function that does what you need as in my example above.
EDIT (More Efficient Way)
This is actually a much better of getting the results that you want because there is no overhead involved with recreating the elements every time the popup is shown. Fiddle - http://jsfiddle.net/WGPhG/7/
CSS
.popup
{
position:absolute;
top:0px;
left:0px;
margin:100px auto;
width:200px;
height:150px;
font-family:verdana;
font-size:13px;
padding:10px;
background-color:rgb(240,240,240);
border:2px solid grey;
z-index:100000000000000000;
display:none
}
.cancel
{
display:relative;
cursor:pointer;
margin:0;
float:right;
height:10px;
width:14px;
padding:0 0 5px 0;
background-color:red;
text-align:center;
font-weight:bold;
font-size:11px;
color:white;
border-radius:3px;
z-index:100000000000000000;
}
HTML
<button onClick="openPopup();">click here</button>
<div id="test" class="popup">
This is a test message
<div class="cancel" onclick="closePopup();"></div>
</div>
JS
function openPopup() {
document.getElementById('test').style.display = 'block';
}
function closePopup() {
document.getElementById('test').style.display = 'none';
}
Try this update on JSFiddle
Changed :
Center page (fixed).
effect (fadein and fadeout)
HTML
<button onClick="openPopup();">click here</button>
<div id="test" class="popup" style="display:none;">
This is a test message
<div class="cancel" onclick="closePopup();"></div>
</div>
CSS
.popup {
position:fixed;
top:0px;
left:0px;
bottom:0px;
right:0px;
margin:auto;
width:200px;
height:150px;
font-family:verdana;
font-size:13px;
padding:10px;
background-color:rgb(240,240,240);
border:2px solid grey;
z-index:100000000000000000;
}
.cancel {
display:relative;
cursor:pointer;
margin:0;
float:right;
height:10px;
width:14px;
padding:0 0 5px 0;
background-color:red;
text-align:center;
font-weight:bold;
font-size:11px;
color:white;
border-radius:3px;
z-index:100000000000000000;
}
.cancel:hover {
background:rgb(255,50,50);
}
JS
function openPopup() {
//document.getElementById('test').style.display = 'block';
$('#test').fadeIn(1000);
}
function closePopup() {
//document.getElementById('test').style.display = 'none';
$('#test').fadeOut(500);
}
Try This
function popUp(){
var popup = document.createElement('div');
popup.className = 'popup';
popup.id = 'test';
var cancel = document.createElement('div');
cancel.className = 'cancel';
cancel.setAttribute('onClick', 'document.getElementById("test").parentNode.removeChild('+popup +');')
popup.innerHTML = "This is a test message";
document.body.appendChild(popup);
popup.appendChild(cancel);
}
I've updated your Fiddle and made it work.
The changed HTML...
<button id="popupButton">click here</button>
Updated JavaScript...
document.onreadystatechange = function () {
function popUp() {
var popup = document.createElement('div');
popup.className = 'popup';
popup.id = 'test';
popup.innerHTML = "This is a test message";
var cancel = document.createElement('div');
cancel.className = 'cancel';
cancel.onclick= function () { popup.destroy(); }
popup.appendChild(cancel);
document.body.appendChild(popup);
}
document.getElementById('popupButton').onclick = popUp;
}​
Did this answer your question or is there anything else?
Update Improved the code and the fiddle. Now open and close works

Changing border and background colors of a table and hovering over them

I am trying to change the background and border of a table by the click of a button. I am also trying change the colors by hovering over the buttons. I got the hover to work, if i do it first. The problem that I am having is that when I click a button to change the background color, I can not click any other button to change to that specific button color. For example, I have four buttons, blue, green, yellow, red. If I click the blue button, the background will change to blue, then if i choose to click the other colored buttons, it will not work and also my hover will not work anymore after I click any button once. Also, How can reduce coupling. At the rate I'm going if I add more color buttons, that only equal more line of code.
<h1 class="underline">Choose a Background or Border Color</h1>
<div class="divCenter">
<div class="divTable" ></div>
</div></br>
<button id="button1">Blue</button>
<button id ="button2">Green</button>
<button id="button3">Yellow</button>
<button id ="button4">Red</button></br>
<button id="button5">Blue Border</button>
<button id ="button6">Green Border</button>
<button id="button7">Yellow Border</button>
<button id ="button8">Red Border</button></br>
<script>
$(document).ready(function()
{
$("#button1").click(function()
{
$(".divTable").attr("class","divTableBlue");
});
$("#button2").click(function()
{
$(".divTable").attr("class","divTableGreen");
});
$("#button3").click(function()
{
$(".divTable").attr("class","divTableBlue");
});
$("#button4").click(function()
{
$(".divTable").attr("class","divTableRed");
});
$("#button1").hover(function()
{
$(".divTable").addClass("divTableBlue");
},
function()
{
$(".divTable").removeClass("divTableBlue");
});
$("#button2").hover(function()
{
$(".divTable").addClass("divTableGreen");
},
function()
{
$(".divTable").removeClass("divTableGreen");
});
$("#button3").hover(function()
{
$(".divTable").addClass("divTableYellow");
},
function()
{
$(".divTable").removeClass("divTableYellow");
});
$("#button4").hover(function()
{
$(".divTable").addClass("divTableRed");
},
function()
{
$(".divTable").removeClass("divTableRed");
});
});
</script>
CSS is
.divTable
{
display:table;
padding-top:10px;
padding-bottom:200px;
padding-left:10px;
padding-right:10px;
width:250px;
background:grey;
border-style:solid;
border-width:5px;
}
.divTableBlue
{
display:table;
padding-top:10px;
padding-bottom:200px;
padding-left:10px;
padding-right:10px;
width:250px;
background:blue;
border-style:solid;
border-width:5px;
}
.divTableGreen
{
padding-top:10px;
padding-bottom:200px;
padding-left:10px;
padding-right:10px;
width:250px;
background:green;
border-style:solid;
border-width:5px;
}
.divTableYellow
{
padding-top:10px;
padding-bottom:200px;
padding-left:10px;
padding-right:10px;
width:250px;
background:yellow;
border-style:solid;
border-width:5px;
}
.divTableRed
{
padding-top:10px;
padding-bottom:200px;
padding-left:10px;
padding-right:10px;
width:250px;
background:red;
border-style:solid;
border-width:5px;
}
.divTableBlueBorder
{
display:table;
padding-top:10px;
padding-bottom:200px;
padding-left:10px;
padding-right:10px;
width:250px;
border-style:solid;
border-width:5px;
border-color:blue;
}
.divTableGreenBorder
{
padding-top:10px;
padding-bottom:200px;
padding-left:10px;
padding-right:10px;
width:250px;
border-style:solid;
border-width:5px;
border-color:green;
}
.divTableYellowBorder
{
padding-top:10px;
padding-bottom:200px;
padding-left:10px;
padding-right:10px;
width:250px;
border-width:5px;
border-style:solid;
border-color:yellow;
}
.divTableRedBorder
{
padding-top:10px;
padding-bottom:200px;
padding-left:10px;
padding-right:10px;
width:250px;
border-style:solid;
border-width:5px;
border-color:red;
}
See if this is what you expected: http://jsfiddle.net/DerekL/YjzmY
You can reduce you code into:
var colors = [ //first make a list of colors.
"Blue",
"Green",
"Red",
"Yellow"
],
selected = ""; //later used to store selected color
Then make a function:
function seperate(arr,j){ //created a separate function
return function(){ // to store i given by the loop.
$(".divTable")
.attr("class","divTable")
.addClass("divTable" + arr[j]);
selected = arr[j];
}
}
function seperate_hover(arr,j){
return function(){
$("#button"+(j+1)).hover(function(){
$(".divTable")
.attr("class","divTable")
.addClass("divTable"+arr[j]);
},function(){
$(".divTable")
.attr("class","divTable")
.addClass("divTable"+selected); //change back to the selected color.
});
}
}
function doTheJob(arr) {
for (var i = 0; i < arr.length; i++) {
$("#button" + (i + 1)).on("click", seperate(arr,i)); //click
seperate_hover(arr,i)(); //hover
}
}
doTheJob(colors);​ //the script will now do the job for you
Also, use .on("click") instead of .click().
Use
$('target').on('click', function(){
//add your code
});
Instead of .click()

Javascript running onload instead of onclick

I need my code to run onclick instead of onload. I think I have to set var Delay = to -1;, but what else? I've seen this code: 
Click here 
But I have no idea how to use it, or where it goes.
<!-- This goes in the head -->
<style>
A.yourlinkclass {
font-family: Arial;
color: #CCCCCC;
text-decoration: none;
font-size: 13px;
font-weight:;
}
A.yourlinkclass:hover {
font-family: Arial;
color: #CCCCCC;
text-decoration: underline;
font-size: 13px;
font-weight:;
}
</style>
<script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
var Delay = 10;//Seconds after them clicking the link, the gateway vanishes.
function setupgateway()
{
var Left = $(window).width() /2;
Left = Left - $('#gatewaydiv').width()/2;
var Top = $(window).height() /2;
Top = Top - $('#gatewaydiv').height()/2;
$('#gatewaydiv').css('top', Top+'px').css('left', Left+'px').css('display', 'inline');
$('#gatewayDimmer').width($('html').width());
$('#gatewayDimmer').height($('html').height());
$('#gatewayDimmer').css({display:'block', position:'fixed'});
}
function removegateway()
{
$('#gatewaydiv').css('display', 'none');
$('#gatewayDimmer').css('display','none');
}
$(document).ready(function()
{
$('.offerlink').click(function()
{
setTimeout('removegateway()', Delay*1000);
});
setupgateway();
});
</script>
<style type="text/css">
body
{
background-image:url('http://');
background-repeat:repeat;
height:100%;
margin:0;
}
#mainContent
{
background-color:white;
margin-left:auto;
margin-right:auto;
margin-top:130px;
width:370px;
border:3px solid #CDCDCD;
text-align:center;
}
#gatewaydiv
{
background-image:url("http://");
background-repeat:no-repeat;
width:370px;
height:546px;
padding:px;
position:absolute;
display:none;
background-color:;
border:solid px ;
text-align:center;
font-family:tahoma;
}
#gatewaydiv h1
{
font-size:24px;
color:#FFFFFF;
}
#gatewayMessage
{
font-size:18px;
}
.offerlink
{
color:#CC9999;
font-weight:bold;
font-size:14px;
}
#OfferList
{
margin:0;
padding:0;
}
#OfferList
{
list-style:none;
}
#gatewayDimmer
{
background-color:#000000;
opacity:0.8;
filter: alpha(opacity = 50);
display:none;
position:absolute;
top:0;
}
</style>
//**this goes in the body**//
<div id="gatewaydimmer">
</div>
<div id="gatewaydiv">
<ul id="blah">
<br>
<br>
<br>
<br>
<h1></h1>
<br /><br />
<li></li>
</ul>
<br /><br />
</div>
You mean, something like this?
$('#my-link').click(function(e){
e.preventDefault();
// Do something here...
});
Plus:
Click Me!
This way, when you click on the link, instead of getting redirected to somewhere else, the code in //Do something here... will be executed.
BTW, you have to wrap it in:
$(document).ready(function(){
//...
});
(or just $(function(){ ... });)
in order to have it executed after the DOM element for the <a> is created.

Show / Hide / Toggle - Javascript / jQuery

I'm very new with Javascript.
I'm trying to do something with Show/Hide functions.
html:
<html>
<head>
<title> New Document </title>
<style>
#button01 {
width:100px;
height:50px;
margin:10px;
padding:6px 0 0 0;
background-color:#f0f0f0;
}
#button01:hover {
background-color:#ffcccc;
}
#button01 a {
display:block;
width:40px;
height:40px;
margin:auto;
background:url("button01.png")
}
#button01 a:hover {
width:40px;
height:40px;
background:url("button01-hover.png")
}
#hidden01 {
display:none;
width:300px;
height:200px;
margin:0 0 10px 0;
border:4px solid #ffcccc;
}
#button02 {
width:100px;
height:50px;
margin:10px;
padding:6px 0 0 0;
background-color:#f0f0f0;
}
#button02:hover {
background-color:#cccccc;
}
#button02 a {
display:block;
width:40px;
height:40px;
margin:auto;
background:url("button02.png")
}
#button02 a:hover {
width:40px;
height:40px;
background:url("button02-hover.png")
}
#hidden02 {
display:none;
width:300px;
height:200px;
margin:0 0 10px 0;
border:4px solid #cccccc;
}
</style>
</head>
<body>
<div style="width:300px;">
<div id="button01"></div>
<div id="button02"></div>
</div>
<div id="hidden01"> </div>
<div id="hidden02"> </div>
</body>
</html>
script:
function toggle(offset){
var i, x;
var stuff = Array('hidden01', 'hidden02'); //put all the id's of the divs here in order
for (i = 0; i < stuff.length; i++){ //hide all the divs
x = document.getElementById(stuff[i]);
x.style.display = "none";
}
// now make the target div visible
x = document.getElementById(stuff[offset]);
x.style.display = "block";
window.onload = function(){toggle(0);}
}
That's working, but I want to fix 2 things:
1- Close/Hide hidden divs if I click on it's corresponding button;
2- After clicking a button, fix hover button image. If click again unfix;
I've tried almost all the scripts posted and can not find a solution. I don't want to open the divs at same time.
If opens one, close the others.
You're using jQuery, so use jQuery.
$(function() {
function toggle(offset) {
$('div[id^=hidden]').hide().eq(offset).show();
}
toggle(0);
});
I don't know what you mean by the two things you want to fix, however. Please clarify.
Edit
Okay, I see what you're going for now. I've cleaned up your code a lot.
HTML
<div style="width:300px;">
<div id="button1"><a></a></div>
<div id="button2"><a></a></div>
</div>
<div id="hidden1"> </div>
<div id="hidden2"> </div>
CSS
#button1, #button2 {
width:100px;
height:50px;
margin:10px;
padding:6px 0 0 0;
background-color:#f0f0f0;
}
#button1:hover {
background-color:#fcc;
}
#button2:hover {
background-color:#ccc;
}
#button1 a, #button2 a {
display:block;
width:40px;
height:40px;
margin:auto;
}
#button1 a {
background:url(http://lorempixum.com/40/40?1)
}
#button2 a {
background:url(http://lorempixum.com/40/40?3)
}
#button1 a:hover, #button1.hover a {
background:url(http://lorempixum.com/40/40?2)
}
#button2 a:hover, #button2.hover a {
background:url(http://lorempixum.com/40/40?4)
}
#hidden1, #hidden2 {
display:none;
width:300px;
height:200px;
margin:0 0 10px 0;
border:4px solid #fcc;
}
JavaScript
var $buttons = $('div[id^=button]'),
$hiddenDivs = $('div[id^=hidden]'),
HOVER_CLASS = 'hover';
$buttons.live('click', function() {
var $this = $(this),
i = $this.index();
$buttons.removeClass(HOVER_CLASS);
$this.addClass(HOVER_CLASS);
$hiddenDivs.hide().eq(i).show();
}).first().click();
Demo
Last edit
Changed JavaScript and CSS. http://jsfiddle.net/mattball/bNCNQ/
CSS
#button1:hover a, #button1.hover a {
background:url(...)
}
#button2:hover a, #button2.hover a {
background:url(...)
}
JS
$buttons.live('click', function () {
var $this = $(this),
i = $this.index(),
show = !$this.hasClass(HOVER_CLASS);
$buttons.removeClass(HOVER_CLASS);
$this.toggleClass(HOVER_CLASS, show);
$hiddenDivs.hide().eq(i).toggle(show);
});
Here's a working demo: http://jsfiddle.net/R6vQ4/33/.
All of your JavaScript code can be condensed into this little block (and this isn't even as small as it can get):
$(document).ready(function()
{
$('div[id^=button]').click(function()
{
var element = $('#hidden' + $(this).attr('id').substr(6));
$('div[id^=button]').css('cssText', 'background-color: none');
if (element.is(':visible'))
{
$(this).css('cssText', 'background-color: none');
$('div[id^=hidden]').hide();
} else {
$('div[id^=hidden]').hide();
element.show();
$(this).css('cssText', 'background-color: ' + $(this).css('background-color') + ' !important');
}
});
});
The state of the button "sticks" when you press it, but my technique is a bit hacky, so feel free to change it.
When you use jQuery, you actually use it ;)

Categories