I am trying to write a javascript for hidding all elements of the class "prewrap", when any image on
the webpage is clicked.
Code so far:
<script type="text/javascript">
function hidepre() {
var elems = document.getElementsByClassName("prewrap");
for (var i = 0; i < elems.length; i++) {
if (elems[i].style.visibility === "hidden") {
elems[i].style.visibility = "visible";
} else {
elems[i].style.visibility = "hidden";
}
}
}
var imgs = document.getElementsByTagName("img");
for (var i = 0; i < imgs.length; i++) {
imgs[i].onclick = "hidepre()";
}
</script>
Jsfiddle: http://jsfiddle.net/aX5kQ/
But this is not working at all, any idea what went wrong?
Your code is working, check this fiddle DEMO
EDIT
Remove the script tag from your jsfiddle leave only the code.
function hidepre() {
var elems = document.getElementsByClassName("prewrap");
for (var i = 0; i < elems.length; i++) {
if (elems[i].style.display === "none") {
elems[i].style.display = "block";
} else {
elems[i].style.display = "none";
}
}
}
var imgs = document.getElementsByTagName("img");
for (var i = 0; i < imgs.length; i++) {
imgs[i].onclick = hidepre;
}
Also in your post this line should be corrected ->
var imgs = document.getElementsByTagName("img");
for (var i = 0; i < imgs.length; i++) {
imgs[i].onclick = hidepre; //this line - here should only be the name of the function without quotes and parentheses
}
It works just fine if you remove the script tag from the JS area of jsfiddle (you put raw javascript in there.. no tags)
edited demo at http://jsfiddle.net/aX5kQ/1/
Hi this code is executed immediately before the image is loaded and so no img is found.
var imgs = document.getElementsByTagName("img");
for (var i = 0; i < imgs.length; i++) {
imgs[i].onclick = "hidepre()";
}
Execute this when the DOM is finished loading with window.onload = ...
Related
there is some images with grayscale(1) by default and when you hover on images it should change to grayscale(0), all of this is on css file. but i want when i click on it or when i hover on it, on both situations the image gets grayscale(0) but the hover effect doesn't work. i tried to put the code for grayscale(0) on an addEventListener in another function but it didn't work.
update:
i added codpen link and one line of code.
as you can see from the beginning left person is coloured because i'm showing their info. i want that when i hover on other persons, they get coloured theme while the person that their info is up is still coloured.
link
showInfo(0);
function showInfo(person) {
var img, info, names;
names = document.querySelectorAll('.box h2');
for (let i = 0; i < names.length; i++) {
names[i].style.display = 'none';
}
names[person].style.display = 'block';
info = document.querySelectorAll('.info p');
for (let i = 0; i < info.length; i++) {
info[i].style.display = 'none';
}
info[person].style.display = 'block';
img = document.querySelectorAll('.images img');
for (let i = 0; i < img.length; i++) {
img[i].style.filter= 'grayscale(1)';
}
img[person].style.filter= 'grayscale(0)';
}
I have updated your showInfo function:
function showInfo(person) {
var img, info, names;
names = document.querySelectorAll('.box h2');
for (let i = 0; i < names.length; i++) {
names[i].style.display = 'none';
}
names[person].style.display = 'block';
info = document.querySelectorAll('.info p');
for (let i = 0; i < info.length; i++) {
info[i].style.display = 'none';
}
info[person].style.display = 'block';
img = document.querySelectorAll('.images img');
for (let i = 0; i < img.length; i++) {
img[i].style.filter= '';
}
img[person].style.filter= 'grayscale(0)';
}
showInfo(0);
The change is very small and that gets you to the required behaviour:
for (let i = 0; i < img.length; i++) {
img[i].style.filter= '';
}
im trying to use a dom event trigger using tag manager to run a script that will change all the on page elements with the same css selector
this is the JS loop im trying to run :
<script>
function dissapper() {
var e = document.getElementsByClassName('form-disappear');
for (var i = 0; i < e.length; i++) {
e[i].style.display="none";
}
}
function appear() {
var e = document.getElementsByClassName('form_appear');
for (var i = 0; i < e.length; i++) {
e[i].style.display="block";
}
}
</script>
any idea why its not working ?
so al i needed to fix this was to add a function call at the end like so :
<script>
function dissapper() {
var e = document.getElementsByClassName('form-disappear');
for (var i = 0; i < e.length; i++) {
e[i].style.display="none";
}
}
function appear() {
var e = document.getElementsByClassName('form_appear');
for (var i = 0; i < e.length; i++) {
e[i].style.display="block";
}
}
dissapper()
appear()
</script>
thank you #nulldev for pointing it out.
I amd working with hiding and showing divs, which have different contents. When i click on a link, i want a div to be shown. But when i click on another link, i want the new content to replace the previous one. Right now, it falls under it instead of replacing it. Any solution?
Javascript
function show(){
var links = {
link1: "content1",
link2: "content2",
link3: "content3",
link4: "content4"
};
var id = event.target.id;
var a = document.getElementsByTagName("a");
document.getElementById(links[id]).style.visibility = 'visible';
}
function init(){
var divs = document.getElementsByTagName("div");
for (i = 0; i < divs.length; i++) {
if (divs[i].className == "div") {
divs[i].style.visibility = 'hidden';
}
}
var a = document.getElementsByTagName("a");
for(i = 0; i < a.length; i++){
a[i].onclick = show;
}
}
window.onload = init;
You need to run the block of code that hides them all before showing the one you want, every time.
Make this:
function hideAll() {
var divs = document.getElementsByTagName("div");
for (i = 0; i < divs.length; i++) {
if (divs[i].className == "div") {
divs[i].style.visibility = 'hidden';
}
}
Remove this code from init() and replace it with a call to hideAll() and add a call to hideAll() at the beginning of show().
I only want to remove images from a content div, not the whole site. I have tried the following:
var elements = document.getElementsByTagName('img');
for (var i = 0; i < elements.length; i++) {
elements[i].style.display = 'none';
}
That removes every image.
var elements = document.getElementsById('content').document.getElementsByTagName('img');
for (var i = 0; i < elements.length; i++) {
elements[i].style.display = 'none';
}
That did nothing.
Can someone tell me what I am doing wrong?
var elements = document.getElementsById('content').document.getElementsByTagName('img');
should be
var elements = document.getElementsById('content').getElementsByTagName('img');
var elements = document.getElementsById('content').getElementsByTagName('img');
for (var i = 0; i < elements.length; i++) {
elements[i].style.display = 'none';
}
if using jQuery
$('#content img').hide();
im trying to find all images on page with a specifc url /images/icons/bollWhiteDown.gif
and delete or change them can it be done?
and how?
thank you
To remove the IMG tags you can do something like this:
var imgs = document.getElementsByTagName("img");
for (var i = 0; i < imgs.length; i++) {
if (imgs[i].getAttribute("src") == "/images/icons/bollWhiteDown.gif") {
imgs[i].parentNode.removeChild(imgs[i]);
}
}
Based on OP's comment:
<script type="text/javascript">
window.onload = function() {
var imgs = document.getElementsByTagName("IMG");
for (var i = 0; i < imgs.length; i++) {;
if (imgs[i].getAttribute("src") == "/images/icons/bollWhiteDown.gif") {
imgs[i].parentNode.removeChild(imgs[i]);
}
}
}
</script>
try this
var images = document.getElementsByTagName('img');
for (var img in images){
if(images[img].src == '/images/icons/bollWhiteDown.gif'){
images[img].parentNode.removeChild(images[img])
}
}
You can do something like this:
var imgs = document.getElementesByTagName("img");
for (var i = 0; i < imgs.length; i++) {
if (imgs[i].src == "/images/icons/bollWhiteDown.gif") {
imgs[i].src = "somethingelse";
}
}