I want to show a random picture with every refresh but I don't know why my code is not working... probably because I'm bad at javascript, haha.
I tried "3" instead of "imgs.length", but it's still not working - I too don't really want to give an exact number, because the image count may vary.. only for my example I use three images.
var imgs = ['img1','img2','img3'];
function getRandomImage(){
var rnd = Math.floor(Math.random()*imgs.length);
document.getElementById('pr_randImage').src = imgs[rnd];
}
</script>
<img id="pr_randImage">
Quellcode is just not showing any src at all for the img. What am I doing wrong? I'm thankful for every help.
change this
var imgs = ['img1','img2','img3'];
to something like this depending on extension of the image you are using
var imgs = ['img1.png','img2.png','img3.jpg'];
If that still doesn't work then you need to include the path of where the images are
Something like this
document.getElementById('pr_randImage').src = "/images/" + imgs[rnd];
Related
I'm making an extension that grabs an image URL within the "uCW" div on an HTML page.
Currently, I have:
var uCW = jNode.closest("div._q7o");
var image = uCW[0].children[1].getElementsByTagName("img")[0].src;
console.log(image);
That finds the image by going into the div/children and pulling the image. Unfortunately, this method is problematic, since it stops working if the children change, which they regularly do.
Instead, I want to select the image by searching the div and all its children (there are a lot of them) for the first image/string that starts with "https://external" (all the images I want start this way, and that doesn't seem to change.)
This is what I tried:
var uCW = jNode.closest("div._q7o");
var image = $(uCW).find([name^="https://external"]).src;
console.log(image);
This doesn't work. The console just prints "undefined."
You could do it like this, if ucw is a classname (if it's an id, you would write $("#ucw") instead):
var image = $(".ucw").find('[src^="https://external"]').attr("src");
console.log(image);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="ucw">
<img src="https://external/1.jpg"/>
</div>
If your images have a name attribute with the source of the image as value, you can also adjust your attempt to fetch the images via their name attribute like you did:
var image = $(".ucw").find('[name^="https://external"]').attr("src");
I'm trying to make some basic image slider as a part of JS excersises, and I've noticed something weird when I ran this script.
The source of an image stored in array under the 0 index is changing when I'm trying to change source image in html code with 'setAttribute' method, so when I want to get back from fifth image to one, this proto-slider (nothing is sliding at the moment) is stuck at second image.
My files are named 0.jpg - 5.jpg.
I've preloaded the images to be displayed smoothly without flicker and I'm displaying one image after the page loads, and then I'm trying to change source of this image to source of next image in array of images. Is this the right way to do it?
Here's the code:
var images = new Array(5);
var i=0;
function addImages(){
for (var j=0;j<images.length;j++){
images[j] = new Image();
images[j].src = j+".jpg";
console.log(images[j].src);
}
var article = document.getElementById("article");
article.insertBefore(images[0], document.getElementById("nav"));
}
function next(){
if (i<images.length-1){
document.getElementsByTagName('img')[0].setAttribute('src',images[++i].src);
console.log(images[0].src);
}}
function prev(){
if (i>0){
document.getElementsByTagName('img')[0].setAttribute('src', images[--i].src);
console.log(images[0].src);
}
}
What is the best way to do such a this as dynamically changing image sources?
I've thought about this:
article.removeChild(document.getElementsByTagName("img")[0]);
article.insertBefore(images[++i], document.getElementById("nav"));
I want to know if this isn't considered as a bad practice and what are the other ways to do it in single line of code.
Thanks in advance and sorry for grammar mistakes.
You could just insert empty image
<img id="someid">
and then use document.getElementById("someid").src=images[0].src
If you'd like to be sure that images[0] is completely loaded, use onload function, like:
images[0].onload=function()
{
document.getElementById("someid").src=images[0].src;
}
new here. I have no access to most of the source files on my website, so I am trying to fix some broken images on page load with javascript.
When I use the inspect element for one of these broken images it shows like this:
<img src="-82.jpg" width="60px">
when they should be
<img src="http://example.com/files/images/-82.jpg" width="60px">
This is for bunch of different images, -82.jpg, -2482.jpg, -3582.jpg
Here's what I have tried so far. This seems to work but for some reason it breaks other javascript on the page.
html
<script type="text/javascript" src="http://example.com/files/js/fiximages.js"></script>
<body onload="fixImages();">
my fiximages.js file
function fixImages() {
var toReplace = '<img src="-';
var replaceWith ='<img src="http://www.example.com/files/images/-';
document.body.innerHTML = document.body.innerHTML.replace(toReplace, replaceWith);
}
I'm a bit of a noob so I also need to know how to link the html to the javascript to get it to load when the page loads. Thanks guys.
This should solve your problem:
function fixImages() {
// Create a list of all img which src starts with "-".
var imgs = document.querySelectorAll('img[src^="-"]');
// Loop through this list.
for (var i = 0; i < imgs.length; i++) {
// For each img, replace its src with the correct path + the
// src that's already there.
imgs[i].setAttribute('src', 'http://www.example.com/files/images/' + imgs[i].getAttribute('src'));
}
}
Demo
Welcome to SO!
The problem in your approach is that changing the body's pure HTML is never a good idea for a dynamic page. Also, javascript's replace, when used without a regex, is going to replace only the first ocurrence of the string.
Now, when you need to change an element's attribute, Javascript has a manipulation called DOM. There are plenty material and tutorials on the web... You should look into it!
http://www.w3.org/TR/DOM-Level-2-Core/introduction.html
http://www.w3schools.com/jsref/dom_obj_document.asp
With DOM, you can select an element as a variable, and manipulate its properties and attributes, so, in your case it would be:
function fixImages() {
var imgs = document.getElementsByTagName("img");
for(var i=0; i<imgs.length; i++) {
if(imgs[i].src.indexOf("-") == 0)
imgs[i].src = "http://www.example.com/files/images/" + imgs[i].src;
}
}
I'm having a problem getting the condition in this if statement to work, i've tried getElementById & src.indexOf but I am still very new to this. I am trying to replace the blank/ball image with the x/pikachu image only if the blank image is currently showing, so if there was one of the other images there it wouldn't replace it. It doesn't seem to recognize the condition I have in there as true, any idea why?
i've also tried:document.getElementById(bn).src=blank & document.images[bn].src==blank & document.pokemon.bn.src==blank
looking for a way to verify if the current source of the image is the var blank.
thank you
var x = "pikachu.jpg";
var o = "Meowth.jpg";
var blank = "ball.jpg";
function b1Move(imageName){
temp2=imageName;
if(document.pokemon[temp2].src==blank)
document.pokemon[temp2].src=x;
cMove();
}
and the html for the images looks like this:
<a href="javascript:b1Move('b1')"><img src="ball.jpg" height=150 width=150 name=b1
id =b1 > </a>
The src property gives the fully resolved URL. You probably want to use the src attribute, which stays the same:
if( document.pokemon[temp2].getAttribute("src") == blank)
document.pokemon[temp2].setAttribute("src",x);
you should try
if(document.pokemon[temp2].src.indexOf(blank) != -1)
since src is the full url.. then you can check it it contains your image name
I need a little help with (probably) something really simple.
I want to use a script which converts images from color to grayscale.
I got it working partially — the first image turns gray, but the second won’t.
I know this is because an id cannot be used multiple times:
var imgObj = document.getElementById('grayimage');
I tried this:
var imgObj = $(’.grayimage’)[0];
But it didn’t work. Changing it to getElementByClass also does not work. (Before people ask, I did change the id to class in the <img> tag.)
I really could use some help here. Thanks in advance!
$('.grayimage').each(function(idx,imgObj){
<do your code here>
});
$('.grayimage') gives you a list of all elements with grayimage as a class. If you add '[0]' you're accessing the first element, so any changes you make will apply to only the first image that it finds with this class.
You should loop through all elements:
var images = $('.grayimage');
for(i = 0; i < images.length; i++) {
var image = images[i];
// Do stuff
}