I have three images, each with their own id. First image's id = "1", second image's id = "2", third one's id = "3".
I have an array with three images. I would like to change the previously mentioned images to the ones within the array. To do this I have made a for loop.
for (var i = 0; i < myArray.length; i++){
var idString = (i).toString();
document.getElementById(idString).src = myArray[i];
}
However, it isn't able to get the id. If I replace idString with "2" then it switches the image with the id = "2" perfectly, so I know for sure that the problem is convering i to string to get the id.
Thank you for reading. Any help will be grealy appreciated.
Your for loop is not starting at 1. Add 1 to i to get the IDs of the images.
for (var i = 0; i < myArray.length; i++){
var idString = (i + 1).toString();
document.getElementById(idString).src = myArray[i];
}
Related
I am trying to create an array of images in javascript for my website when I declare array size it is working but when I am trying to take it as a dynamic array it is not showing images. can anyone tell me what's wrong with this code?
var theImages = new Array()
for (i = 0; i < theImages.length; i++)
{
theImages[i] = i+".jpg"
}
The initial size of theImages is 0.
You need to use
for (i = 0; i < 5; i++)
{
theImages[i] = i+".jpg";
}
replace 5 by the number of images you have.
This is happening because you are looping an empty array, the length/size of the array is 0 because you have just created a new array and are looping it without any elements in it yet.
If you wish to add all images to an array, you will have to know the total number of images you have/ count of images, and then run the loop to add the images in the array, which you were able to do successfully you said.
var theImages = new Array();
for (i = 0; i < 6; i++)
{
theImages[i] = i+".jpg";
}
If you are getting the image names for SQL, it is a different query you want to use, let me know if that is what you are looking for.
I know that there have been a lot of similar questions and I went through most of them. The code that is closest to what I'm trying to achieve is this one.
I have a list of people in each column (which represent a day). for the sake of this question let's assume it's 8 people in each column. I need to randomly select 5 unique people names. I've used splice() to delete the selected item from the array to make sure that it is not selected twice. I'm new to the coding and I think I'm doing some basic mistake as the splice works for the 1st loop and then the array goes back to the original one. Can you, please, help to identify my mistake?
for (var x = 0; x < 5; x++) {
var sourceArray = ss.getRange(49,j+5,8,1).getValues();
var gg = Math.floor(Math.random()*sourceArray.length);
var pickedHLA = sourceArray[gg];
sourceArray.splice(gg, 1);
var HLAselect = ss.getRange(30+x,j+5,1,1)
HLAselect.setValue(pickedHLA);
In your for loop you are redefining the sourceArray during each iteration - you need to define this outside the loop, then do your work to randomly select and remove from the array:
var sourceArray = ss.getRange(49,j+5,8,1).getValues(); //establish full list of people
for (var x = 0; x < 5; x++) {
var gg = Math.floor(Math.random()*sourceArray.length); //get random index
var pickedHLA = sourceArray[gg]; //get random person via random index
sourceArray.splice(gg, 1); //remove random person from full list of people
var HLAselect = ss.getRange(30+x,j+5,1,1)
HLAselect.setValue(pickedHLA);
}
The way you do this is actually quite simple, all it requires a few lines of code:
var arr = ["Cheese", "Purple", "List", "1", "2", "3", "4", "5"];
function random() {
var randomNumber1 = parseInt(Math.random() * arr.length);
var random = arr[randomNumber1];
alert(random);
}
<button onClick="random()">Click Me</button>
There you go!
I need a bit of comprehension on this one pls :
Its a function to sort by price product. Only problem is that I dont get why I dont have to empty my table before appending the products
Here is a playground
This is the code
$length = $('[data-th="Prix : "]').length;
$dispo = $('.productsDispo');
$temp = 0;
for(var i = 0; i < $length; i++)
{
for(var j = i; j < $length; j++)
{
$prixI = $($dispo[i]).find($('[data-th="Prix : "]')).text().slice(0, $($dispo[i]).find($('[data-th="Prix : "]')).text().length-2);
$prixJ = $($dispo[j]).find($('[data-th="Prix : "]')).text().slice(0, $($dispo[j]).find($('[data-th="Prix : "]')).text().length-2);
if(parseInt($prixI) < parseInt($prixJ))
{
$temp = $dispo[i];
$dispo[i] = $dispo[j];
$dispo[j] = $temp;
}
}
}
for(var i = 0; i < $length; i++)
{
$('.rwd-table tbody').append($dispo[i])
}
That's because of how append works in jQuery. From docs:
If an element selected this way is inserted into a single location elsewhere in the DOM, it will be moved into the target (not cloned):
Since you do the sorting and appending manipulating the very DOM objects you selected, they are already in the table, and you basically move them inside the table with append.
jQuery's append does not make a clone of an element that you pass to it. It 'cuts' the element from its old location and 'pastes' it into a new one.
Here's a simpler example that shows this behavior, if anyone needs it illustrated.
Essentially what I'm trying to do right now is, given some input text, I split it up by white space and display on a
div id= "animation"
Every time a button is clicked, the array should go forward one word.
This is my current attempt.
function displayText() {
var displayText = document.getElementbyID("animation");
var list = (document.getElementbyID("input").split(/[ \tn]+/);
for (var i = 0; i < list.length; i++) {
displayText.innerHTML = list.get[i];
}
}
Is my thought process somewhat correct? For whatever reason, it doesn't seem to be working.
there are multiple issues in your method
function displayText() {
var displayTextAnimation = document.getElementbyID("animation"); //keep variable name and method name different
var list = (document.getElementbyID("input").value).split(/[ \tn]+/); //use value property and observe extra bracket
for (var i = 0; i < list.length; i++) {
displayTextAnimation.innerHTML = list.charAt(i); //observe replacing get by charAt
}
}
Can someone please help me with how to push different attributes of elements with the same classname into an array? I'm not that good at Javascript and this is what I have tried but the arrays turns up empty.
One array should contain the URL of images and the other one is for image-texts in a span-element:
function slideShow(){
imgUrlList.length = 0;
imgTextList.length = 0;
var imgUrl = document.getElementsByClassName('markedImg');
var imgText = document.getElementsByClassName('marked');
for(j=0; j<imgUrl.length; j++){
imgUrlList.push(imgUrl.src);
}
for(k=0; k<imgText.length; k++){
imgTextList.push(imgText.innerHTML);
}
openWindow();
}