Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 03.04.2018, 10:14
Аспирант
Отправить личное сообщение для Javany11 Посмотреть профиль Найти все сообщения от Javany11
 
Регистрация: 04.03.2018
Сообщений: 34

Не получается забрать 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)//останавливаем интервал
}})

Последний раз редактировалось Javany11, 03.04.2018 в 14:40.
Ответить с цитированием
  #2 (permalink)  
Старый 03.04.2018, 10:24
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

Сообщение от Javany11
var imgs_1 = document.querySelectorAll('.carousel_1 img');
.carousel_1 - это общий элемент изображений автомата, так?
Ответить с цитированием
  #3 (permalink)  
Старый 03.04.2018, 10:47
Аспирант
Отправить личное сообщение для Javany11 Посмотреть профиль Найти все сообщения от Javany11
 
Регистрация: 04.03.2018
Сообщений: 34

Да, .carousel_1 это див с тремя img
Ответить с цитированием
  #4 (permalink)  
Старый 03.04.2018, 10:55
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

Тогда, по идее, на каждом по три изображения, средние - выигрыш? Не проще ли иметь одну сетку 3х3 управляемую одним таймером. А если всего три изображения в окне, то еще проще.
А у вас три раздельных таймера работающих асинхронно.
Ответить с цитированием
  #5 (permalink)  
Старый 03.04.2018, 11:09
Аспирант
Отправить личное сообщение для Javany11 Посмотреть профиль Найти все сообщения от Javany11
 
Регистрация: 04.03.2018
Сообщений: 34

Да, всё верно, на каждом по три изображения, средние - выигрыш. Безусловно, наверное проще. Я не волшебник, я только учусь. Я вообще хотел каждый барабан останавливать кнопкой под ним. Но нужно обязательно использовать рандом. А вот теперь уперся в условную конструкцию, вернее в src для неё.
Ответить с цитированием
  #6 (permalink)  
Старый 03.04.2018, 11:14
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

Я не любитель азартных игр, а тем более компьютерных, вообще не увлекаюсь играми компьютерными, но чтобы барабан останавливался тремя кнопками (как и запускался) впервые слышу. Наверное же останавливается сразу все, после чего остается получить в каждом списке document.querySelectorAll() среднее изображение.

PS. Кстати, для расчета выигрыша, не обязательно document.querySelectorAll(), хватит и document.querySelector() с соответствующим селектором. И учтите, то что возвращает document.querySelectorAll() до запуска таймеров у вас, не будет равно тому, что имеется на момент их остановки.

Последний раз редактировалось laimas, 03.04.2018 в 11:23.
Ответить с цитированием
  #7 (permalink)  
Старый 03.04.2018, 11:57
Аспирант
Отправить личное сообщение для Javany11 Посмотреть профиль Найти все сообщения от Javany11
 
Регистрация: 04.03.2018
Сообщений: 34

Не получается так. Прописал:
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 в консоли не обнаружил.
Ответить с цитированием
  #8 (permalink)  
Старый 03.04.2018, 12:45
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

document.querySelectorAll('.carousel_1 :nth-child(2)')
Ответить с цитированием
  #9 (permalink)  
Старый 03.04.2018, 13:01
Аспирант
Отправить личное сообщение для Javany11 Посмотреть профиль Найти все сообщения от Javany11
 
Регистрация: 04.03.2018
Сообщений: 34

Вот что я получил. Причем я получил теги, а мне нужно получить 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, мы получаем массив? Или я ошибаюсь?

Последний раз редактировалось Javany11, 03.04.2018 в 13:06.
Ответить с цитированием
  #10 (permalink)  
Старый 03.04.2018, 13:17
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 3,791

Сообщение от Javany11
Когда пишем document.querySelectorAll, мы получаем массив?
Экземпляр класса NodeList, не массив.
NodeList к массиву можно так привести:
var array=[].slice.call(document.querySelectorAll('a'));
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как сделать для разных атрибутов id тега img? Ola Events/DOM/Window 8 09.04.2017 15:46
Как скрыть img, если src пустой? Gosha Ponomaryov Events/DOM/Window 7 23.01.2015 17:36
Как получить src img, у которого нет ни id, ни name, ни class viktor073 Events/DOM/Window 12 23.01.2014 12:23
Подскажите, плиз, с изменением src для img внутри figure! Sam L Events/DOM/Window 9 16.05.2013 19:27
Изменение img src при hover на другом img -- как? adelante jQuery 2 14.04.2010 08:12