<p>Success login. You will be redirected in <span class="counter">10</span> second(s).</p>
<p>Wrong username/password. You will be redirected in <span class="counter">10</span> second(s).</p>
<script type="text/javascript">
function countdown() {
var i = document.getElementByClassName('counter');
if (parseInt(i.innerHTML)<=0) {
location.href = 'login.php';
}
i.innerHTML = parseInt(i.innerHTML)-1;
}
setInterval(function(){ countdown(); },1000);
</script>
Before it was id=counter, and it works for one span tag. But I want two tags to share the same function. I tried changing it to getElementByClassName but it doesn't work. Can anyone tell me why?
There is no function getElementByClassName(), but just getElementsByClassName() (Note the plural for element*s*!). This returns a NodeList, which you then have to traverse:
function countdown() {
var i = document.getElementsByClassName('counter');
for( var j=0; j<i.length; j++ ) {
if (parseInt(i[j].innerHTML)<=0) {
location.href = 'login.php';
}
i[j].innerHTML = parseInt(i[j].innerHTML)-1;
}
}
setInterval( countdown,1000);
PS: In your setInterval() you do not need a function expression - just give it a reference to the function itself (without calling it!).
document.getElementsByClassName('counter') will return an array.
'getElements' - So to target an element in that array would be like :
document.getElementsByClassName('counter')[0]
or loop through them :
var counters = document.getElementsByClassName('counter');
for(var i=0, len=counters.length; i<len; ++i) {
counters[i].innerHTML = 'I am content ' +i;
}
Edit : - note the 'getElement s ByClassName' ( plural elements ) as others have pointed out
There's no getElementByClassName(); in Javascript. You should use getElementsByTagName();
Or, use jQuery selector $('.counter'); (need jQuery library).
For more information, look at [this][1].
Related
I am using this code :-
function makeDirectionTabs() {
alert('sdfsf');
jQuery('.adp-warnbox').remove();
jQuery('#adp-placemark').parent().remove();
jQuery('.adp-legal').remove();
var i = 0;
jQuery('#fullDirections .adp > div').each(function () {
i = i + 1;
alert(i + jQuery(this).html());
directionContent = jQuery(this).html();
jQuery('#tab' + i).append(directionContent)
});
}
I got div elements in tab1 , tab2 etc.. with alert
But when I remove alert from this code I did not get div elements in tabs Why ?
What I am leaving .. Where Am I wrong ?
Please help Me.
Main problem :-
Loop running fast and html() function is not working. When I use alert in loog then loop stay for alert and html() works. Please tell me resoin or solution for this.
Strange because cannot see any asynchronous request anywhere. But usually, you should use the index param of each loop. See if its changing anything:
function makeDirectionTabs() {
jQuery('.adp-warnbox').remove();
jQuery('#adp-placemark').parent().remove();
jQuery('.adp-legal').remove();
jQuery('#fullDirections .adp > div').each(function (i) {
directionContent = jQuery(this).html();
jQuery('#tab' + i).append(directionContent)
});
}
Please see if this helps:
function makeDirectionTabs() {
alert('sdfsf');
jQuery('.adp-warnbox').remove();
jQuery('#adp-placemark').parent().remove();
jQuery('.adp-legal').remove();
var i = 0;
var $divs = jQuery('#fullDirections .adp > div');
for(var i=0; i < $divs.length ; i++){
directionContent = jQuery($divs[i]).html();
jQuery('#tab' + i).append(directionContent)
}
}
window.onload = init;
function init(){
var allSelect = document.getElementsByTagName("option");
for (var i = 0; i < allSelect.length; i++){
allSelect[i].onchange = loadLink;
}
}
function loadLink(){
alert("TEST");
}
So I'm working on this problem for a class and the functions are incredibly simple. I replaced the code needed with a simple alert because even tracking break point by point it doesn't run the loadLink() function. AllSelect is populated and are all have the onchange value with the specified code in the {}.
I have also tried putting it into the html element by hand and it still doesn't work.
Any Ideas? I'm running locally on my computer with both IE and Chrome if anyone cares to know. Thanks ahead of time.
The onchange event belongs on the select element, not the option elements. So:
window.onload = init;
function init(){
var allSelect = document.getElementsByTagName("select");
for (var i = 0; i < allSelect.length; i++){
allSelect[i].onchange = loadLink;
}
}
function loadLink(){
alert("TEST");
}
I think you want
var allSelect = document.getElementsByTagName("select");
You are instead querying the option elements within selects in the DOM.
Preamble: I'm Italian, sorry for my bad English.
This is my problem:
I want to assign a function to a set of buttons.
I need to send a parameter to the function.
this is the code that I've tried:
function test(atxt) {
var buttons = $('.tblButton');
for (var i = 0; i < buttons.length; i++) {
buttons[i].onClick(sayHello(atxt));
}
}
function sayHello(txt){alert('hello' + txt)};
...getting the following error:
Uncaught TypeError: Object #<HTMLButtonElement> has no method 'onClick'
can you tell me where I went wrong and how can I fix it?
EDIT: I need iteration because I need the 'id of the button as a parameter of the function so i need to do buttons[i].onClick(sayHello(buttons[i].id))
buttons[i].onClick(sayHello(atxt));
Supposed to be
$(buttons[i]).on('click', function() { sayHello(atxt) });
If you want to get the current button id then I think you are looking for this..
for (var i = 0; i < buttons.length; i++) {
$(buttons[i]).on('click', function() { sayHello(this.id) });
}
If you want to iterate through all of the buttons then you have to do that with .each() handler of the jquery:
$(function(){
$(".tblButton").each(function () {
$(this).click(function(){
alert($(this).attr('id'));
});
});
});
checkout the jsbin: http://jsbin.com/usideg/1/edit
Would this not work for your example: Do you have another reason for the iteration?
function test(atxt) {
$('.tblButton').on('click',function(){sayHello(atxt);});
}
function sayHello(txt){alert('hello' + txt)};
OR optionally if the elements are static and present:
function test(atxt) {
$('.tblButton').click(function(){sayHello(atxt);});
}
function sayHello(txt){alert('hello' + txt)};
Alternate approach: just change
to this style:
var txt = "fred";
var atext = "hello" + txt;
function sayHello(atext) {
alert(atext);
}
$('.tblButton').on('click', function() {
sayHello(atext);
});
//below here just to demonstrate
$('.tblButton').eq(0).click();//fires with the fred
txt = "Johnny";// new text
atext = 'hello' + txt;
$('.tblButton').eq(1).click();//fires the Johnny
see it working here:
http://jsfiddle.net/dFBMm/
SO based on your note:
this markup and code:
<button class="tblButton" id="Ruth">Hi</button>
<button class="tblButton" id="Betty">Hi again</button>
$('.tblButton').on('click', function() {
alert("Hello "+$(this).attr("id"));
});
$('.tblButton').eq(0).click();//fires with the Ruth
$('.tblButton').eq(1).click();//fires the Betty
http://jsfiddle.net/dFBMm/1/
I have in Javascript:
for ( i=0; i < parseInt(ids); i++){
var vst = '#'+String(img_arr[i]);
var dst = '#'+String(div_arr[i]);
}
How can I continue in jQuery like:
$(function() {
$(vst).'click': function() {
....
}
}
NO, like this instead
$(function() {
$(vst).click(function() {
....
});
});
There are other ways depending on your version of jquery library
regarding to this, your vst must need to be an object which allow you to click on it, and you assign a class or id to the object in order to trigger the function and runs the for...loop
correct me if I am wrong, cause this is what I get from your question.
$(function() {
$(vst).click(function() {
....
}
})
You can use any string as element selector param for jQuery.
Read the docs for more information.
http://api.jquery.com/click/
http://api.jquery.com/
You can pass a String in a variable to the $() just the way you want to do it.
For example you can do:
var id = 'banner';
var sel = '#'+id;
$(sel).doSomething(); //will select '#banner'
What's wrong is the syntax you are using when binding the click handler. This would usually work like:
$(sel).click(function(){
//here goes what you want to do in the handler
});
See the docs for .click()
Your syntax is wrong, but other than that you will have no problem with that. To specify a click:
$(function() {
for ( i=0; i < parseInt(ids); i++){
var vst = '#'+String(img_arr[i]);
var dst = '#'+String(div_arr[i]);
$(vst).click(function (evt) {
...
});
}
})
Note that since vst is changing in the loop, your event code should also be placed in the loop.
EDIT: Assuming you want the same thing to happen for each image and each div, you could also do something like this:
$(function () {
function imgEventSpec($evt) {
// image clicked.
}
function divEventSpec($evt) {
// div clicked.
}
for (var idx = 0; idx < img_arr.length && idx < div_arr.length; idx ++) {
$("#" + img_arr[idx]).click(imgEventSpec);
$("#" + div_arr[idx]).click(divEventSpec);
}
});
I have the following function that fades each line of an unordered-list in and out. Right now it works for #skills_hints but I want to use it for other #named_hints. Is there a way I can reuse this code over multiple unordered lists without copying and pasting the entire code and just changing the IDs?
$(document).ready(function(){
$('#skills_hints .hint');
setInterval(function(){
$('#skills_hints .hint').filter(':visible').fadeOut(800,function(){
if($(this).next('li.hint').size()){
$(this).next().fadeIn(800);
}
else{
$('#skills_hints .hint').eq(0).fadeIn(800);
}
});
},7000);
});
The following will do exactly what you have posted and the doit function (you should rename this obviously) can be called again and again passing a different id.
function doit(id){
$('#'+id+' .hint');
setInterval(function(){
$('#'+id+' .hint').filter(':visible').fadeOut(800,function(){
if($(this).next('li.hint').size()){
$(this).next().fadeIn(800);
}
else{
$('#'+id+' .hint').eq(0).fadeIn(800);
}
});
},7000);
}
$(function(){
doit('skills_hints');
})
A nice trick is turning this into a closure, in case you need a separate function to use as a callback, etc
function doit(id_name){
var id = '#'+id_name + '.hint';
return (function(){
$(id);
setInterval(function(){
$(id).filter(':visible').fadeOut(800,function(){
if($(this).next('li.hint').size()){
$(this).next().fadeIn(800);
}
else{
$(id).eq(0).fadeIn(800);
}
}
},7000);
})
}
//examples
doit_skills = doit('skills_hint');
doit();
doit_foo = doit('foo');
doit_foo()
names = ['a', 'b'];
for(var i=0; i<names.length; i++){
doit(names[i])();
}
You can transform your code into a jQuery Plugin (http://docs.jquery.com/Plugin)