Не получается забрать src тега img
Добрый день! Ребята, подскажите пожалуйста как забрать src="" тега <img>. Есть игровой автомат, в котором крутятся три барабана, изменение картинок организовано путем замены src, значения которых хранятся в массиве. Вращение барабана организовано через setInterval, который в свою очередь останавливается через clearInterval и Math.random(). Думаю что для подсчета очков мне нужно забрать src в переменную после остановки барабана и далее я пропишу в условной конструкции выигрышные комбинации. Только вот не получается src забрать. Пробовал document.getElementById(',,,').src, забирает но не меняется динамически. Подскажите как быть.
Старался код комментировать.
var pics=['images/1.gif', 'images/2.gif', 'images/3.gif', 'images/4.gif', 'images/5.gif', 'images/6.gif', 'images/7.gif', 'images/8.gif', 'images/9.gif', 'images/10.gif'];//храним src картинок
var imgs_1 = document.querySelectorAll('.carousel_1 img');//забираем картинки из карусели №1
var imgs_2 = document.querySelectorAll('.carousel_2 img');//забираем картинки из карусели №2
var imgs_3 = document.querySelectorAll('.carousel_3 img');//забираем картинки из карусели №3
var count = 0;
var a = 0;//здесь храним результат от setInterval
var b; // тут храним округленные рандомные числа
var c; // тут храним округленные рандомные числа
var d; // тут храним округленные рандомные числа
lever.addEventListener('click',function(){
b = Math.random()*10//рандомим от 0 до 10
b = Math.trunc(b) //округляем до целого
c = Math.random()*10//рандомим от 0 до 10
c = Math.trunc(c) //округляем до целого
d = Math.random()*10//рандомим от 0 до 10
d = Math.trunc(d) //округляем до целого
//console.log(b);//тестим рандом
//console.log(c);//тестим рандом
//console.log(d);//тестим рандом
var setInt1 = setInterval(slider1,100);//запускаем интервал
var setInt2 = setInterval(slider2,120);//запускаем интервал
var setInt3 = setInterval(slider3,140);//запускаем интервал
function slider1(){//запускаем барабан
a++;//добавляем к переменной 1 с каждым интервалом
if(a>=10){a=0} //ограничиваем переменную до 10
count--;
if(count<0) count = pics.length-1;
for(let i =0; i<imgs_1.length;i++) imgs_1[i].src = pics[(i+count)%pics.length];
if(a==b)clearInterval(setInt1); //останавливаем интервал
}
function slider2(){//запускаем барабан
a++;
if(a>=10){a=0}//ограничиваем переменную до 10
count--;
if(count<0) count = pics.length-1;
for(let i =0; i<imgs_2.length;i++) imgs_2[i].src = pics[(i+count)%pics.length];
if(a==c)clearInterval(setInt2)//останавливаем интервал
}
function slider3(){//запускаем барабан
a++;
if(a>=10){a=0}//ограничиваем переменную до 10
count--;
if(count<0) count = pics.length-1;
for(let i =0; i<imgs_3.length;i++) imgs_3[i].src = pics[(i+count)%pics.length];
if(a==d)clearInterval(setInt3)//останавливаем интервал
}})
|
Цитата:
|
Да, .carousel_1 это див с тремя img
|
Тогда, по идее, на каждом по три изображения, средние - выигрыш? Не проще ли иметь одну сетку 3х3 управляемую одним таймером. А если всего три изображения в окне, то еще проще.
А у вас три раздельных таймера работающих асинхронно. |
Да, всё верно, на каждом по три изображения, средние - выигрыш. Безусловно, наверное проще. Я не волшебник, я только учусь. Я вообще хотел каждый барабан останавливать кнопкой под ним. Но нужно обязательно использовать рандом. А вот теперь уперся в условную конструкцию, вернее в src для неё.
|
Я не любитель азартных игр, а тем более компьютерных, вообще не увлекаюсь играми компьютерными, но чтобы барабан останавливался тремя кнопками (как и запускался) впервые слышу. Наверное же останавливается сразу все, после чего остается получить в каждом списке document.querySelectorAll() среднее изображение.
PS. Кстати, для расчета выигрыша, не обязательно document.querySelectorAll(), хватит и document.querySelector() с соответствующим селектором. И учтите, то что возвращает document.querySelectorAll() до запуска таймеров у вас, не будет равно тому, что имеется на момент их остановки. |
Не получается так. Прописал:
var aa = document.querySelectorAll('.carousel_1 :nth-child(2)') console.log(aa) Получил в консоли: NodeList [img] 0:imglength: 1 __proto__: NodeList script.js:36 NodeList [img] script.js:36 NodeList [img] script.js:36 NodeList [img] Получаю элементы пока работает счетчик, от одного до десяти и более. Причем src в консоли не обнаружил. |
document.querySelector
|
Вот что я получил. Причем я получил теги, а мне нужно получить src последнего тега.
script.js:38 <img src="images/8.gif" alt="pearl"> script.js:38 <img src="images/5.gif" alt="pearl"> script.js:38 <img src="images/3.gif" alt="pearl"> script.js:38 <img src="images/10.gif" alt="pearl"> script.js:38 <img src="images/8.gif" alt="pearl"> script.js:38 <img src="images/6.gif" alt="pearl"> script.js:38 <img src="images/5.gif" alt="pearl"> script.js:38 <img src="images/3.gif" alt="pearl"> script.js:38 <img src="images/1.gif" alt="pearl"> script.js:38 <img src="images/10.gif" alt="pearl"> script.js:38 <img src="images/8.gif" alt="pearl"> script.js:38 <img src="images/6.gif" alt="pearl"> script.js:38 <img src="images/4.gif" alt="pearl"> script.js:38 <img src="images/3.gif" alt="pearl"> script.js:38 <img src="images/1.gif" alt="pearl"> script.js:38 <img src="images/9.gif" alt="pearl"> script.js:38 <img src="images/8.gif" alt="pearl"> script.js:38 <img src="images/7.gif" alt="pearl"> А когда прописываю document.querySelector('.carousel_1 :nth-child(2)').src получаю file:///D:/Downloads/dz_kazino/dz_kazino/images/1.gif script.js:38 file:///D:/Downloads/dz_kazino/dz_kazino/images/8.gif script.js:38 file:///D:/Downloads/dz_kazino/dz_kazino/images/6.gif script.js:38 file:///D:/Downloads/dz_kazino/dz_kazino/images/5.gif script.js:38 file:///D:/Downloads/dz_kazino/dz_kazino/images/3.gif script.js:38 file:///D:/Downloads/dz_kazino/dz_kazino/images/1.gif script.js:38 file:///D:/Downloads/dz_kazino/dz_kazino/images/9.gif script.js:38 file:///D:/Downloads/dz_kazino/dz_kazino/images/7.gif script.js:38 file:///D:/Downloads/dz_kazino/dz_kazino/images/4.gif script.js:38 file:///D:/Downloads/dz_kazino/dz_kazino/images/2.gif script.js:38 file:///D:/Downloads/dz_kazino/dz_kazino/images/1.gif script.js:38 file:///D:/Downloads/dz_kazino/dz_kazino/images/9.gif script.js:38 file:///D:/Downloads/dz_kazino/dz_kazino/images/7.gif script.js:38 file:///D:/Downloads/dz_kazino/dz_kazino/images/6.gif script.js:38 file:///D:/Downloads/dz_kazino/dz_kazino/images/5.gif script.js:38 file:///D:/Downloads/dz_kazino/dz_kazino/images/4.gif script.js:38 file:///D:/Downloads/dz_kazino/dz_kazino/images/3.gif script.js:38 file:///D:/Downloads/dz_kazino/dz_kazino/images/2.gif script.js:38 file:///D:/Downloads/dz_kazino/dz_kazino/images/1.gif script.js:38 file:///D:/Downloads/dz_kazino/dz_kazino/images/10.gif Может я не по тому пути иду? Когда пишем document.querySelectorAll, мы получаем массив? Или я ошибаюсь? |
Цитата:
NodeList к массиву можно так привести:
var array=[].slice.call(document.querySelectorAll('a'));
|
У вас три блока родительские для изображений, при этом каждый блок имеет по три изображения. Должен иметь, то есть ранее в них загруженные должны удаляться при запуске барабана, иначе вы и будете получать кучу всякого. Получая из каждого блока второе изображение вы получите всего три. А значение src, это document.querySelector(...).src.
Цитата:
|
Цитата:
var list=document.querySelectorAll('.carousel_1 img'),
item=list[list.length-1];
alert(item.src);
|
Nexus,
зачем для querySelectorAll :nth-child(2)? |
laimas, не знаю, скопипастил у тс :)
Поправил селектор. |
Nexus,
ему надо избавиться от геморроя вначале - трех кнопок и трех таймеров. Тут либо анимируем движение постоянных изображений в каждом барабане, а random нужен только для задания разных скоростей анимации каждого барабана и ее направления. Либо изменяем через Nms каждое из трех изображений каждого барабана имитируя движение. Не спец в игрушках, не интересуют, но мне кажется так. |
Спасибо. Но я получил 17 алертов :)
|
Там нет трех кнопок. Есть три счетчика, каждый на свой барабан. Если я сделаю один счетчик на три барабана, разве я смогу эти барабаны остановить рандомно?
|
Цитата:
Цитата:
PS. Да, если бы можно было "курить барабаны", то какая бы интересная игра была. :) |
Крутить барабаны с постоянными картинками было бы намного проще. Но в задании сказано что src картинок необходимо хранить в массиве, картинки менять путем изменения src используя рандом. Я посчитал что выбранный мною способ относительно простой. Ох как я ошибался... Сегодня у препода спрошу, может она скажет как быть. Вам спасибо за помощь, плюсики уже у Вас в карме.:) Если будет решение, выложу.
|
Читал, смотрел - ничего не понял.
Собрал макет. Таки вроде все работает
<div class = "carousel_1">
<img src= 'https://javascript.ru/cat/list/dom.gif'/>
<img src= 'https://javascript.ru/cat/list/event.gif'/>
<img src= 'https://javascript.ru/cat/list/integr.jpg'/>
</div>
<div class = "carousel_2">
<img src= 'https://javascript.ru/cat/list/dom.gif'/>
<img src= 'https://javascript.ru/cat/list/event.gif'/>
<img src= 'https://javascript.ru/cat/list/integr.jpg'/>
</div>
<div class = "carousel_3">
<img src= 'https://javascript.ru/cat/list/dom.gif'/>
<img src= 'https://javascript.ru/cat/list/event.gif'/>
<img src= 'https://javascript.ru/cat/list/integr.jpg'/>
</div>
<button id='lever'>click</button>
<div id="result"></div>
<script>
var pics=['https://javascript.ru/cat/list/dom.gif', 'https://javascript.ru/cat/list/event.gif', 'https://javascript.ru/cat/list/integr.jpg', 'https://javascript.ru/cat/list/donkey.gif', 'https://javascript.ru/cat/list/firefox.gif', 'https://javascript.ru/cat/list/opera.gif', 'https://javascript.ru/cat/list/libs.jpg', 'https://javascript.ru/cat/list/scriptaculous_54.png', 'https://javascript.ru/cat/list/dojo_54.png', 'https://javascript.ru/cat/list/jquery_54.png'];//храним src картинок
var imgs_1 = document.querySelectorAll('.carousel_1 img');//забираем картинки из карусели №1
var imgs_2 = document.querySelectorAll('.carousel_2 img');//забираем картинки из карусели №2
var imgs_3 = document.querySelectorAll('.carousel_3 img');//забираем картинки из карусели №3
var count = 0;
var a = 0;//здесь храним результат от setInterval
var b; // тут храним округленные рандомные числа
var c; // тут храним округленные рандомные числа
var d; // тут храним округленные рандомные числа
lever.addEventListener('click',function(){
b = Math.random()*10//рандомим от 0 до 10
b = Math.trunc(b) //округляем до целого
c = Math.random()*10//рандомим от 0 до 10
c = Math.trunc(c) //округляем до целого
d = Math.random()*10//рандомим от 0 до 10
d = Math.trunc(d) //округляем до целого
//console.log(b);//тестим рандом
//console.log(c);//тестим рандом
//console.log(d);//тестим рандом
var res1 = "", res2 = "", res3 = "";
var setInt1 = setInterval(slider1,100);//запускаем интервал
var setInt2 = setInterval(slider2,120);//запускаем интервал
var setInt3 = setInterval(slider3,140);//запускаем интервал
function slider1(){//запускаем барабан
a++;//добавляем к переменной 1 с каждым интервалом
if(a>=10){a=0} //ограничиваем переменную до 10
count--;
if(count<0) count = pics.length-1;
for(let i =0; i<imgs_1.length;i++) imgs_1[i].src = pics[(i+count)%pics.length];
if(a==b) { clearInterval(setInt1); //останавливаем интервал
res1 = "Барабан 1 " + document.querySelectorAll('.carousel_1 img')[1].src;
if(res2 != "" && res3 != "") result.innerHTML = res1 + "<br>" + res2 + "<br>" + res3;
}
}
function slider2(){//запускаем барабан
a++;
if(a>=10){a=0}//ограничиваем переменную до 10
count--;
if(count<0) count = pics.length-1;
for(let i =0; i<imgs_2.length;i++) imgs_2[i].src = pics[(i+count)%pics.length];
if(a==c) { clearInterval(setInt2); //останавливаем интервал
res2 = "Барабан 2 " + document.querySelectorAll('.carousel_2 img')[1].src;
if(res1 != "" && res3 != "") result.innerHTML =res1 + "<br>" + res2 + "<br>" + res3;
}
}
function slider3(){//запускаем барабан
a++;
if(a>=10){a=0}//ограничиваем переменную до 10
count--;
if(count<0) count = pics.length-1;
for(let i =0; i<imgs_3.length;i++) imgs_3[i].src = pics[(i+count)%pics.length];
if(a==d) { clearInterval(setInt3)//останавливаем интервал
res3 = "Барабан 3 " + document.querySelectorAll('.carousel_3 img')[1].src;
if(res1 != "" && res2 != "") result.innerHTML =res1 + "<br>" + res2 + "<br>" + res3;
}
}})
</script>
|
Цитата:
Если конечно все по-барабану, то меняйте их случайно как угодно, мне все одинаково, что вам сказал куратор, то и делайте. PS. В реальных автоматах картинки одни и те же, если только барабаны или наклейки на них не менять. |
|
Цитата:
|
Цитата:
if(res1 != "" && res2 != "") if(res2 != "" && res3 != "") if(res1 != "" && res3 != "") строки 60;72;84; |
Цитата:
Вместо result.innerHTML = ... можно подставить вызов функции обработки результата |
Цитата:
|
| Часовой пояс GMT +3, время: 11:26. |