Как сделать обновление переменной в моем случае?

Question

[Дима Клепко]

const body = document.querySelector('body', 'body.background')
const img1 = document.querySelector('#img1', '#img1.display')
const img2 = document.querySelector('#img2', '#img2.display')
const p1 = document.querySelector('#p1', '#p1.display')
const p2 = document.querySelector('#p2', '#p2.display')
const bt1 = document.querySelector('#bt1', '#bt1.display')
const p3 = document.querySelector('#p3', '#p3.display')
const bt2 = document.querySelector('#bt2', '#bt2.display')
const img3 = document.querySelector('#img3', '#img3.display')
const p4 = document.querySelector('#p4', '#p4.display')


const slider = 1;


img1.onclick = function(){
	p1.style.display = 'none'
	img1.style.display = 'none'
	img2.style.display = 'block'
	bt1.style.display = 'block'
}


bt1.onclick = function(){
	img2.style.display = 'none'
	bt1.style.display = 'none'
	p3.style.display = 'block'
	bt2.style.display = 'block'
	slider = 2;
}




bt2.onclick = function(){
  bt2.style.display = 'none'
  p3.style.display = 'none'
  img3.style.display = 'block'
  p4.style.display = 'block'

	let color = ['red','purple'];
	let colorIteraion = 0;
	function colorFunction(){
	if ( colorIteraion >= color.length) colorIteraion = 0;
	    document.body.style.background = color[colorIteraion];
	    colorIteraion++;
	}
	setInterval(colorFunction,500);

  	slider = 3
}

const back = document.querySelector('#back', '#back.display');

back.onclick = function(){
	if  (slider == 1){
		body.style.background = 'red';
	}

	if (slider == 2){
		body.style.background = 'blue';
	}

	if (slider == 3){
		body.style.background = 'black';
	}
}

Как сделать постоянное обновление переменной slider?

Comments

[Alex_mos]

А что вы вобще пытаетесь сделать? Я так понимаю это слайдер?

[Владимир]

Вы прочитали что есть такая штука как const а где и когда ее применять прочитать забыли ?
каким образом вы собираетесь присваивать slider если это константа?
Что вообще значит "сделать постоянное обновление переменной" ?

https://developer.mozilla.org/en-US/docs/Web/JavaS...

[Дима Клепко]

Alex_mos, Да, я хочу сделать чтобы функция считывала переменную slider постоянно, чтобы человек мог в реальном времени переключатся между событиями, если вводить в ручную slider = 1, slider = 2, slider = 3, то функция выполняется, ну она не считывается в реальном времени, slider всегда равен 1

[edward_freedom]

document.querySelector('#img2', '#img2.display')

а что за второй аргумент? Функция один только принимает

[Дима Клепко]

edward_freedom, Да, я уже понял, я просто оставил #img2

[edward_freedom]

Дима Клепко, так тебе это еще в прошлой теме сказали, а ты все равно написал

[Alex_mos]

Дима Клепко, советую вам покопаться на codpen и посмотреть как реализуют слайдеры, думаю найдете более оптимальное решение и сократите свой код. А то у вас что то совсем ничего не поймёшь)

[Дима Клепко]

Владимир, Ну если я нажимаю на #img1, происходит событие это должно считываться в slider, а он должен указывать в себя новое значение, а это не происходит

[Ankhena]

Дима Клепко,

Ну если я нажимаю на #img1, происходит событие это должно считываться в slider, а он должен указывать в себя новое значение, а это не происходит

Логично. Потому что вы сказали, что slider это константа, она не меняется. Почитайте про var, let и const. Они в любом случае встретятся в вашей жизни.

Вы написали прекрасный скрипт, но есть вопрос: а если слайдов будет 15, так и будете для каждого отдельно клики прописывать? А потом, если потребуется добавить ещё один, то нужно будет снова открыть js и поправить скрипт? Тут в соседнем вопросе один деятель на CSS ваяет слайдер из десятка слайдов, вы тоже можете без JS обойтись :)

Вам нужно почитать про циклы, про добавление и удаление классов (чтобы не писать стили в JS), querySelector и querySelectorAll и т.д.

Т.е. вместо 3х отдельных img1, img2 и img3 у вас должно быть:
const slides = document.querySelectorAll('.slide')
предварительно всем слайдам раздать нужный класс в разметке.
Аналогично с кнопками.
Потом в цикле перебираете кнопки и соответствующим слайдам задаете класс типа .active у остальных убираете.

[Сергей delphinpro]

хочу сделать чтобы функция считывала переменную slider постоянно

Событийную модель для того и придумали, чтобы НЕ "считывать переменные постоянно"
Что-то произошло- переменная поменялась - выполнили действие.

Answer 1

[Георгий Еремеев]

Прочтите пожалуйста доку о const