<html>
<head>
<script type="text/javascript">
function getElement(e) {
var element = e.target || e.srcElement;
alert(element.id);
}
</script>
</head>
<body onclick="getElement()">
<div id="div1"></div>
<div id="div2"></div>
</body>
</html>
Tried this to get the ID of element clicked and alert it.
I'm sure it's something pretty basic I'm missing.
Can anyone help?
It's actually pretty basic, stop using inline event handlers
<!DOCTYPE html>
<head>
<title>It works</title>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
<script type="text/javascript">
document.addEventListener('click', function(e) {
alert( e.target.id );
}, false);
</script>
</body>
</html>
FIDDLE
In this particular case, you need to actually send in the event object when binding to the onclick handler (example below).
However, I would strongly advise against using this approach!
Use document.addEventListener instead.
<html>
<head>
<script type="text/javascript">
function getElement(e) {
var element = e.target || e.srcElement;
alert(element.id);
}
</script>
</head>
<body onclick="getElement(event)">
<div id="div1">First Div</div>
<div id="div2">Second Div</div>
</body>
</html>
Related
I have the following html(+razor) :
<div id = "years" class="btn-group btn-group-justified timeline">
#DateTime.Now.Year
#DateTime.Now.AddYears(-1).Year
#DateTime.Now.AddYears(-2).Year
</div>
I simply want to have use these as buttons and something to happen on click. Therefore I have the following jquery, which won't work :
$(".btn a").click(function () {
console.log('click');
var txt = $(this).text();
console.log(txt);
alert(txt);
});
I simply want to have the value inbetween the on click.
Right now, when I click one of the buttons, nothing happens. Neither I get 'click' written on the console, nor i get an alert with the text in the tag. Can someone help make this work?
$(".btn a") is looking for <a> tags that are descendents of .btn class. That is not what you have
Just use the inner listener and get rid of the outer one. It is not a good practice to create event listeners inside other event handlers unless you really have a good reason and know what you are doing
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<div id="years" class="btn-group btn-group-justified timeline">
#DateTime.Now.Year
<br>
<br>
#DateTime.Now.AddYears(-1).Year
<br>
<br>
#DateTime.Now.AddYears(-2).Year
</div>
<script>
$("#years a").click(function(e) {
console.log(this);
e.preventDefault();
alert("click");
});
</script>
</body>
</html>
You can try this code
Example #1:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<div id = "years" class="btn-group btn-group-justified timeline">
#DateTime.Now.Year<br><br>
#DateTime.Now.AddYears(-1).Year<br><br>
#DateTime.Now.AddYears(-2).Year
</div>
<script>
$("a.btn").click(function(e){
e.preventDefault();
console.log(this);
alert("click");
});
</script>
</body>
</html>
Example #2:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<div id = "years" class="btn-group btn-group-justified timeline">
#DateTime.Now.Year<br><br>
#DateTime.Now.AddYears(-1).Year<br><br>
#DateTime.Now.AddYears(-2).Year
</div>
<script>
// without a
$(".btn").click(function(e){
e.preventDefault();
console.log(this);
alert("click");
});
</script>
</body>
</html>
Example #3:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<div id = "years" class="btn-group btn-group-justified timeline">
#DateTime.Now.Year<br><br>
#DateTime.Now.AddYears(-1).Year<br><br>
#DateTime.Now.AddYears(-2).Year
</div>
<script>
$("#years a").click(function(e){
console.log(this);
e.preventDefault();
alert("click");
});
</script>
</body>
</html>
Your enclosing div does not have a class of .btn so your jquery selector won't find anything. Try:
$(".btn-group a").click(...)
With the use of Javascript I want to display different HTML content based on the value of a class of an HTML element which is existing on the page. eg:
<body class="de">
display:
<div id="de">some html</div>
If the body element has another class value, eg class="en" it should display
<div id="en">some other html</div>
I have already played around with hasClass function and an if statement. But it did not work for me.
What about ?
<body class="en">
<script>
if($('body').hasClass('de')) {
$('body').html('<div id="de">some html</div>');
}
else if($('body').hasClass('en')) {
$('body').html('<div id="en">some other html</div>');
}
else if($('body').hasClass('es')) {
$('body').html('<div id="es">another html</div>');
}
else {
...
}
</script>
Dynamic :
var bodyClass = $('body').attr("class");
var bodyValue = $('#' + bodyClass).html();
$('body').html(bodyValue);
But you should verify that body has a class and that an element with an identical id exist in your document.
The solution I am working with:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</head>
<body class="lang-de some other">
<h1>Überschrift 1</h1>
<div id="lang"></div>
<script>
var bodyClass = $('body').attr("class").substr(0,7);
var bodyValue = $('#' + bodyClass).html();
$('body').html(bodyValue);
if($('body').hasClass('lang-de')) {
document.getElementById("lang"); {
$('#lang').html('<div id="de">some html</div>');}
}
else if ($('body').hasClass('lang-en')) {
document.getElementById("lang"); {
$('#lang').html('<div id="en">some other html</div>');}
}
</script>
</body>
</html>
With jQuery :
$('.de').html('<div id="de">some html</div>');
If you have different tags to fulfil with different html content use a generic class + a specific one (eg : class="dynamic de") and loop all elements with "dynamic" class and use hasClass in a if/elseif (or better a switch/case) to target them separatly.
Btw, AngularJs has "directives" that handle perfectly that kind of need ;)
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</head>
<body class="lang-de some other">
<h1>Überschrift 1</h1>
<div id="lang-de"></div>
<div id="lang-en"></div>
<script>
var bodyClass = $('body').attr("class").substr(0,7);
$('div#lang-*').hide();
$('#' + bodyClass).show();
</script>
</body>
</html>
What about?
<html>
<head>
<style>
body.lang-en #en{display:block;}
body.lang-de #de{display:block;}
</style>
</head>
<body class="lang-en">
<div id="en" hidden>some text</div>
<div id="de" hidden>some other text</div>
<hr>
<button onclick="toggle()"></button>
</body>
<script>
function toggle(){
var lang=['lang-en','lang-de'];
var i=lang.indexOf(document.body.className);
document.body.className=(i+1 == lang.length ? 0 :i+1);
}
</script>
</html>
OR
with jQuery
$('#en,#de,#jp').hide();
$('#'+$('body').attr('class').replace('lang-','')).show();
Hi guys im new to jquery/ javascript. i found some code in w3schools and i want to use it in my website. but i want the animation to trigger ever time i load the page. please help me how to do this
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeToggle();
$("#div2").fadeToggle("slow");
$("#div3").fadeToggle(3000);
});
});
</script>
</head>
<body>
<p>Demonstrate fadeToggle() with different speed parameters.</p>
<button>Click to fade in/out boxes</button>
<br><br>
<div id="div1" style="width:80px;height:80px;background-color:red;"></div>
<br>
<div id="div2" style="width:80px;height:80px;background-color:green;"></div>
<br>
<div id="div3" style="width:80px;height:80px;background-color:blue;"></div>
</body>
</html>
i want to do something like this
<body onload="myFunction()">
<h1>Hello World!</h1>
<script>
function myFunction() {
alert("Page is loaded");
}
</script>
</body>
</html>
Is this what you wanted:
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body onload="myFunction()">
<h1>Hello World!</h1>
<script>
function myFunction() {
$("#div1").fadeToggle();
$("#div2").fadeToggle("slow");
$("#div3").fadeToggle(3000);
}
</script>
</body>
</html>
try this
$(document).ready(function(){
$("#div1").fadeToggle();
$("#div2").fadeToggle("slow");
$("#div3").fadeToggle(3000);
});
if you are approaching for executing the function after Page loaded, then Put below JavaScript at end of your HTML design:
<script type="text/javascript">
window.onload = myFunction();
</script>
And define the function at start of the Page as you've done already!
So, final Code becomes like below:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeToggle();
$("#div2").fadeToggle("slow");
$("#div3").fadeToggle(3000);
});
});
</script>
</head>
<body>
<p>Demonstrate fadeToggle() with different speed parameters.</p>
<button>Click to fade in/out boxes</button>
<br><br>
<div id="div1" style="width:80px;height:80px;background-color:red;"></div>
<br>
<div id="div2" style="width:80px;height:80px;background-color:green;"></div>
<br>
<div id="div3" style="width:80px;height:80px;background-color:blue;"></div>
<script type="text/javascript">
window.onload = myfunction();
</script>
</body>
</html>
Let me know by accepting it, if it works :)
I think best way is to use event listener.
<script type="text/javascript">
window.addEventListener('load',myfunction,false);
</script>
Consider the HTML :
<html>
<head>
Something...
</head>
<body>
<script>
$('#btnviewdetails').text('Save').button("refresh");
</script>
<button id='btnviewdetails' type='button'>SET</button>
</body>
</html>
When I hit the button , the JS code is not invoked . What am I doing wrong ?
Thanks
You need to bind an event handler on the button. The function will be invoked when the button is pressed.
$('#btnviewdetails').bind('click', function() {
$(this).text('Save');
});
Complete code :
<html>
<head>
<script src="jquery-2.1.0.min.js"></script>
Something...
</head>
<body>
<button id='btnviewdetails' type='button'>SET</button>
<script>
$('#btnviewdetails').bind('click', function() {
$(this).text('Save');
});
</script>
</body>
</html>
Kindly notify me I am explaining it well or not. I'm using .append() to repeat a div inside a page.
HTML
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#num").click(function () {
$('#form').append("<div class='Box'>I'm new box by prepend</div>");
});
});
</script>
</head>
<body>
<div id="form">
Hai Add Another by clicking the button
</div>
<button id="num">Click Me</button>
/body>
</html>
This works good when I add a div repeatedly. But I like to call it externally like the below code.
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#num").click(function () {
$('#form').append($('#Box'));
});
});
</script>
</head>
<body>
<div id="form">
Hai Add Another by clicking the button
</div>
<div class='Box'>I'm new box by prepend</div>
<button id="num">Click Me</button>
/body>
</html>
Why is this not working?
Try using clone():
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#num").click(function () {
$(".Box:first").clone().appendTo("#form");
});
});
</script>
</head>
<body>
<div id="form">
Hai Add Another by clicking the button
</div>
<div class='Box'>I'm new box by prepend</div>
<button id="num">Click Me</button>
</body>
</html>
You have to create a new element before adding it.
Demo
try this
$(document).ready(function(){
$("#num").click(function () {
$(".Box").first().clone().appendTo("#form");
});
});
Try something like this:-
$("#parent_div").append('<div id="created_div"></div>');