I try to remove my links one by one from div id="wrapper". But it doesn't work:
window.onload = function () {
setInterval(function () {
var wrapper = document.getElementById("wrapper");
var my_links = wrapper.getElementsByTagName("a");
var i;
for (i = 0; i < my_links.lenght + 1; i++) {
my_links.splice(0, i);
}
}, 5000);
}
What is the problem? How can i fix my snippet?
Typo here and length + 1 should be length - 1:
for (i=0; i<my_links.lenght+1; i++){
should be:
for (i=0; i<my_links.length-1; i++){
Further more
Look at this question over here to find the remove function you are looking for: Remove element by id
So it will be:
for (i=0; i<my_links.length-1; i++){
my_links[i].remove();
}
Remove function only works with the function of the question I posted.
Related
Im trying to make a div expanded once you click on another div. In my case I'm try to make div with some text in it expand when the image is clicked. A link to my JSFiddle - https://jsfiddle.net/txoyuvqn/3/
My javascript that I am using looks like.
var divs = document.getElementsByClassName('image');
var whattochange = document.getElementsByClassName('text');
for (var i = 0; i < divs.length; i++)
divs[i].addEventListener("click", function () {
for (var i = 0; i < whattochange.length; i++) {
whattochange[i].style.width = '500px'
whattochange[i].style.transition = 'all 1s'
whattochange[i].style.backgroundColor = 'red'
}
}, false);
However when I click on the class called image it effects all the Text classes, i know it's because were changing the css to all of the text divs, however is there a way to make it only effect the correlating div? Or am I going about creating this in the wrong way?
getElementsByClassName returns an array, not a single element.
divs is an array, and you are correctly using a for loop and the index indicator [i] after your variable name divs.
You need a similar for loop for whattochange.
var divs = document.getElementsByClassName('image');
var whattochange = document.getElementsByClassName('text');
for (var i = 0; i < divs.length; i++)
divs[i].addEventListener("click", function () {
for (var i = 0; i < whattochange.length; i++) {
whattochange[i].style.width = '800px';
whattochange[i].style.transition = 'all 1s';
whattochange[i].style.backgroundColor = 'red';
}
}, false);
There may be a better way, but you could do it like this:
var divs = document.getElementsByClassName('image');
var whattochange = document.getElementsByClassName('text');
for (var i = 0; i < divs.length; i++)
{
divs[i].addEventListener("click", function()
{
var w = document.getElementById(this.id.replace('img', 'text'));
w.style.width = '800px'
w.style.transition = 'all 1s'
w.style.backgroundColor = 'red'
});
whattochange[i].id = 'text' + i;
divs[i].id = 'img' + i;
}
See the fiddle
Javascript
var divs = document.getElementsByClassName('image');
var whattochange = document.getElementsByClassName('text');
for (var i = 0; i < divs.length; i++) {
divs[i].addEventListener("click", function () {
for (var i = 0; i < whattochange.length; i++) {
whattochange[i].style.width = '800px';
whattochange[i].style.transition = 'all 1s';
whattochange[i].style.backgroundColor = 'red';
}
}, false);
}
You have to be sure that the elements exist if your JavaScript code depends on them. The reason why your fiddle didnt work was because, you was not loading the script after the body has finished loading.
In your code, One way of achieving this is by putting the <script> tag at the end of the body like this:
<html>
<head></head>
<body>
<script type="text/javascript">
// code here
</script>
</body>
You can also put all your code in a function for the window.onload event or use jQuery.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
i need some code to change label text every two seconds for example on page load label text is "100" after two seconds is"200" after two more seconds is "300" and ....
i have an array for this meaning,my code is like this:
<script type="text/javascript">
function func_code() {
var codes = null;
var code_arr = null;
var j = null;
var i = null;
codes = "100000,100004,100007,100009,100012";
code_arr = codes.split(',');
var len = code_arr.length;
for (j = 0; j <= len; j++) {
for (i = code_arr[j]; i <= code_arr[j + 1]; i++) {
setTimeout(function () { change_number(i) }, 2000);
******wait here for 2 seconds*******
}
}
// document.getElementById('counter').innerHTML = 5000000;
}
function change_number(i) {
document.getElementById('counter').innerHTML = i;
}
</script>
<label id="counter">123</label>
I'm not sure that I understood correctly..
Maybe you need something like this?
function func_code() {
var codes = "100000,100004,100007,100009,100012";
var code_arr = codes.split(',');
for (i = 0;i < code_arr.length;i++) {
(function(i){
setTimeout(function(){
change_number(code_arr[i]);
}, 2000*i);
})(i)
}
}
function change_number(i) {
document.getElementById('counter').innerHTML = i;
}
func_code();
<div id="counter"></div>
<script>
setInterval(function () { change_number() }, 2000);
function change_number(){
var elem = document.getElementById('counter');
var val = elem.innerHTML;
elem.innerHTML = parseInt(val)+100;
}
</script>
<label id="counter">100</label>
var x = 100;
var myCounter = setInterval(function(){
console.log(x);
x = x+100;
if(x == 110){
clearInterval(myCounter); //to clear interval
}
}, 2000);
A recursive solution would look something like this:
var len = code_arr.length;
function looper(j,len) {
if (j<=len) {
for (i = code_arr[j]; i <= code_arr[j + 1]; i++) {
setTimeout(function () {
change_number(i);
looper(j+1,len); // call the function again
}, 2000);
} // for
} // if
} // function
looper(0,len);
I am currently using the below to detect if an element with the id bar is clicked. I would like to change it so that this function would run whether bar is clicked or any a tag without duplicating the function.
document.getElementById("bar").onclick = function() {
//do things...
};
Just define the function separately and give it a name:
function MyFunction() {
// Your function here
}
document.getElementById("bar").onclick = MyFunction;
var links = document.getElementsByTagName("a");
for (var i=0; i < links.length; i++) {
links[i].onclick = MyFunction;
}
Depending on the browsers you can target, you could use
var nodes = document.querySelectorAll("#bar, a");
for (var i=0, ii=nodes.length; i < ii; i++) {
nodes[i].addEventListener('click', function multiElementClickHandler(event){ alert("clicked " + event.target); });
}
Otherwise, define it separately like #mayabelle said. :)
The following script:
var containerDIV = document.getElementById("sampleContainer");
for(var i = 0; i < 5; i++)
{
var dynamicDIV = document.createElement("div");
containerDIV.appendChild(dynamicDIV);
dynamicDIV.onclick = function() { alert(i); };
dynamicDIV.innerHTML = "Row: " + i;
}
when clicking on the dynamically rows the output in the alert box will always be "5" instead of 0, 1, ..
Do anyone knows a proper way to assign the onclick event?
You should use the closure power:
for (var i = 0; i < 5; i++) {
(function(i) {
dynamicDIV.onclick = function() {
alert(i);
};
})(i);
}
DEMO: http://jsfiddle.net/zvPfZ/
The code below works and is good but I am going to place it into a DRUPAL page and I would like it to refresh the "DIV" instead of the whole page. Can someone help? Thanks!
document.write("<div class='box1'><center><h1>Telling Time Worksheets</h1></center><div class='box_number_holder'>")
var nums = [01,02,03,04,05,06,07,08,09,10,11,12];
var gen_nums = [];
function in_array(array, el) {
for(var i = 0, j = array.length; i < j; i++)
if(array[i] == el) return true;
return false;
}
function get_rand(array) {
var rand = array[Math.floor(Math.random()*array.length)];
if(!in_array(gen_nums, rand)) {
gen_nums.push(rand);
return rand;
}
return get_rand(array);
}
for(var i = 0; i < 9; i++) {
document.write("<div class='box_numbers'><center>What Time is it?" + get_rand(nums) + "</center></div>");
}
Thanks!
Create a function that loops through all of your dynamically created div elements:
function refreshDivs() {
$('.box_numbers > center').each(function() {
$(this).html('What Time is it? ' + get_rand(nums));
});
}