<style>
/*Общий Контейнер*/
.wheel_wrp {
    width: inherit;
    box-sizing: border-box;
    box-shadow: 0 0 0 10px #ffffff, 0 0 15px 3px #ababab;
    position: relative;
    overflow: hidden;
    border-radius: 50%;
}
/*Ось колеса в центре*/
.wheel_wrp:after {
    content: "";
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background-color: #fff;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
/*Оформление сектора*/
.wheel_sector{
    width: 0px;
    height: 0px;
    border-style: solid;
    position: absolute;
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}
/*Оформление разделительных линий*/
.wheel_line {
    background-color: #fff; /*Цвет линии*/
    transform: rotate(0deg);
    height: 4px;
    position: absolute;
    z-index: 99;
}
/*Оформление текста*/
.wheel_textcont {
    position: absolute;
    top: 0;
    z-index: 99999;
    display: flex;
    flex-direction: column-reverse;
    justify-content: flex-end;
    align-items: center;
    font-family: 'Gilroy',Arial,sans-serif;
    font-weight: 600;
    color: #000;
    font-size: 16px;
    line-height: 1.2;
    text-align: center;
}
.wheel_textcont div {
    transform: rotate(-90deg);
    margin-top: 35px;
    width: 150px;
}
/*Иконка*/
.wheel_textcont img {
    width: 35px;
    transform: rotate(-90deg);
    margin-top: 15px;
}
/*Адаптив текст + иконка*/
@media screen and (max-width:640px){
.wheel_textcont div {
    transform: rotate(-90deg);
    margin-top: 35px;
    width: 120px;
    font-size: 13px;
    line-height: 1.2;
    text-align: center
}    
.wheel_textcont img {
    width: 15px;
    margin-top: 15px;
}
}
@media screen and (max-width:480px){
.wheel_textcont img {
    width: 25px;
    margin-top: 10px;
}
}
.spin_wheel , .open-wheel , .close-wheel{ cursor:pointer}
.spin_wheel {  transition: all 0.2s linear}
.spin_wheel:hover {filter: sepia(1)}
.form_noactive{
    opacity:0.4;
    pointer-events:none;
}
.wheel_form .t-input-subtitle,
.wheel_form input.t-input{
    text-align: center;
}
/*Показать блок*/
.wheel-pos{
    position:fixed;
    width:100%;
    top:0;
    z-index:999;
}
.wheel-time{transition: transform 0.5s ease-in-out}
.slide-wheel{transform: translateX(-100%)}
.wheel-open-body{overflow:hidden}
</style>

И сами скрипты окна: (Похоже в куске — //Скрыть блок — где-то чего-то напортачила)

<script>
$( document ).ready(function() {
    
//Список секторов : Цвет - Текст - ссылка на иконку    
let wheelOption = [
    ['#F59CA9' , '-1000 руб<br>любая услуга' , 'https://static.tildacdn.com/tild3663-6231-4735-a530-373033343530/discount-1000-rub.png'],
    ['#BF75BA' , 'Аппаратный<br>массаж лица' , 'https://thumb.tildacdn.com/tild3861-3964-4537-b134-343435313564/-/cover/220x220/center/center/-/format/webp/lifting.png'],
    ['#F59CA9' , '-10%<br>любая услуга' , 'https://static.tildacdn.com/tild3831-3761-4461-b966-663330613930/discount-10.png'],
    ['#BF75BA' , 'Зона S<br>бесплатно' , 'https://thumb.tildacdn.com/tild6339-6535-4532-b738-313466643564/-/cover/220x220/center/center/-/format/webp/laser.png'],
    ['#F59CA9' , '-15%<br>любая зона' , 'https://static.tildacdn.com/tild3666-3438-4936-b162-343565303932/discount-15.png'],
    ['#BF75BA' , '30 мин<br>массажа' , 'https://static.tildacdn.com/tild6663-6232-4434-a636-336637303162/vacuum-massage.png'],
    ['#F59CA9' , 'Карбокситерапия<br>для лица' , 'https://static.tildacdn.com/tild6233-3430-4630-b964-643561346462/carboxytherapy.png'],
    ['#BF75BA' , '-50%<br>на массаж' , 'https://static.tildacdn.com/tild6366-3734-4537-b261-643531663963/discount-50.png'],
    
];


    setTimeout(function(){
        window.dispatchEvent(new Event('resize'));
    }, 1000);


//Создаём элемент в Zero
let sector = wheelOption.length;
$('.wheelfortune').append('<div class="wheel_wrp"></div>');
$('.wheelfortune').html($('.wheel_wrp'));
let wheelRec = $('.wheelfortune').closest('.t-rec');
wheelRec.addClass('wheel-pos slide-wheel');
$('.close-wheel').fadeOut(200);
//Кол-во оборотов до остановки
let maxRevolution = 20;
//Время вращения
let spinTime = 5;
let spinFinish = false;
let resizeTxt;
let diameter;

//Создание колеса
function creatingWheel(){
//Диаметр колеса
diameter = $('.wheel_wrp').width();
//Угол сектора
let angle = Number(((360*Math.PI)/(sector*180)).toFixed(3));
//Катет сектора
let sectorHalfWidth = 0.5*diameter*Math.tan(angle/2);
//Заполняем сектора
for (let i=0; i<sector; i++){
$('.wheel_wrp').append('<div class="wheel_sector bg-sector'+i+'"></div><div class="wheel_line line-sector'+i+'"></div><div class="wheel_textcont text-sector'+i+'"><div></div><img src='+wheelOption[i][2]+'></div>');
//Формируем угол поворота и задаём цвет
$('.bg-sector'+i+'').css({
    "transform":"rotate("+(360*i/sector+90)+"deg)",
    "border-color": ""+wheelOption[i][0]+" transparent"
});
//Отрисовка границ сектора
$('.line-sector'+i+'').css({
    "width" : diameter/2+"px",
    "transform" : "rotate("+((360*i/sector)+(180*(sector-1))/sector)+"deg)",
    "height":"4px",
    "top" : "calc(50% - 2px)",
    "transform-origin" : diameter/2+"px 2px"
});
//Расставляем текст
$('.text-sector'+i+' div').html(wheelOption[i][1]);
// Формируем угол для текста
$('.text-sector'+i+'').css({"transform":"rotate("+(360*i/sector+90)+"deg)"});
};
//Форма сектора
$('.wheel_sector').css({
    "border-width": (diameter/2)+"px "+sectorHalfWidth+"px 0",
    "transform-origin": ""+sectorHalfWidth+"px "+(diameter/2)+"px",
    "left":((diameter/2)-sectorHalfWidth)+"px"
});
//Форма текста
$('.wheel_textcont').css({
    "width": (diameter/2)+"px",
    "height": (diameter/2)+"px",
    "transform-origin": ""+(diameter/4)+"px "+(diameter/2)+"px",
    "left":((diameter/2)-(diameter/4))+"px",
});
}; creatingWheel();

//Вращение колеса
function spinWheel(deg){
    $('.wheel_wrp').css({
       "height": diameter+"px",
       "transform" : "rotate("+deg+"deg)",
       "transition": "transform "+spinTime+"s cubic-bezier(0, 0.76, 0.5, 1.01)"
    });
};spinWheel(0);
//Случайный сектор    
function getRandomInRange(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}
let finalSector = -1;
//При нажатии на кнопку вращения
$('.spin_wheel .tn-atom').click(function(e) {
    //Получаем финальный сектор 
    finalSector = getRandomInRange(0, sector-1);
    //Поворачиваем колесо
    spinWheel(maxRevolution*360 +  (finalSector*360)/sector );
    if (finalSector==0) finalSector=sector;
    //Выводим текст и картинку
    setTimeout(function(){
    let prizTxt = wheelOption[sector-finalSector][1];
    let prizeImg = wheelOption[sector-finalSector][2];
    spinFinish = true;
    finalStep('Ваш приз:<br>'+prizTxt, prizeImg);
    //Сохраняем результат
    let finalResult  = {
        text: prizTxt , 
        img: prizeImg ,
        sect:finalSector
    };
    localStorage.setItem('_code_w', JSON.stringify(finalResult));
    }, spinTime*1000);
});
  
//Проверка прошлого вращения
let prevResult = localStorage.getItem('_code_w');let prevList;
let prevSend = localStorage['_wh_send'];
if (prevResult) {
    prevList = JSON.parse(prevResult);
    spinFinish = true;
    $('.wheel_form button').attr('type','submit');
    let preffTxt = '<u>Ваш прошлый приз</u><br>';
    if(prevSend){
        preffTxt = '<u>Заявка уже была отправлена</u><br>';
        blockForm();
        spinFinish = false;
    };
    finalStep(preffTxt+prevList.text, prevList.img);
    spinWheel( (prevList.sect*360)/sector );
};

//Блокируем форму
function blockForm(){
if(!prevResult || prevSend ){
$('.wheel_form').addClass('form_noactive');
setTimeout(function(){$('.wheel_form button').attr('type','button')}, 3500);
};
};blockForm();

//Отправка формы
$('.wheel_form').delegate(".t-submit", "click", function(){
    setTimeout(function(){
        if ( $('.wheel_form .t-form').hasClass("js-send-form-success")){
            localStorage['_wh_send'] = 'sf';closeWheel();blockForm();
        };
    }, 1000);
});

//Отрисовка финального шага
function finalStep(prizTxt, prizeImg){
    //Удаляем кнопку
    $('.spin_wheel').remove();    
    $('.present_text .tn-atom').html(prizTxt);
    $('.present_img img').attr({
        'data-original':prizeImg,
        'src':prizeImg
    });
    //Открываем форму
   if(spinFinish){ 
    $('.wheel_form').removeClass('form_noactive');
    $('.wheel_form button').attr('type','submit');
   };
    //Заполняем поле
    setTimeout(function(){
        resizeTxt = prizTxt.replace(/<\/?[^>]+>/g,' ');
        $('input[name="sector_prize"]').val(resizeTxt);
    }, 2500);
};
//Изменение размера окна
$( window ).resize(function() {
clearTimeout(window.resizedFinished); 
window.resizedFinished = setTimeout(function(){
    
    setTimeout(function(){
        window.dispatchEvent(new Event('resize'));
    }, 1000);
    
    $('.wheel_wrp').empty();creatingWheel();
    if(finalSector>=0) { spinWheel( (finalSector*360)/sector )
    }else if (prevResult) {
        spinWheel( (prevList.sect*360)/sector );
    }else{spinWheel();};
    setTimeout(function(){    
        if(!spinFinish){  $('.wheel_form button').attr('type','button');
        }else{ $('input[name="sector_prize"]').val(resizeTxt) };
    }, 3500);    
}, 500);
});  

//Показать блок
setTimeout(function(){
  $('body').addClass('wheel-open-body');
  wheelRec.addClass('wheel-time').removeClass('slide-wheel');
  if(firstOpen && !prevResult ) {spinWheel(360); firstOpen = false};
  setTimeout(function(){
     $('.close-wheel').fadeIn(200);
  }, 550);
}, 30000);

//Скрыть блок
function closeWheel(){ $('body').removeClass('wheel-open-body');$('.close-wheel').fadeOut(0); wheelRec.addClass('slide-wheel');};
$('.close-wheel').click(function(){closeWheel();});
$(document).keydown(function(eventObject){
	if(eventObject.which == 27 && !wheelRec.hasClass('slide-wheel')){closeWheel()};
});
});
</script> 

Для отправки своей же странице значения прокрутки браузера при нажатии определённой кнопки, я пишу такой скрипт.

function modzap(id)
				{ 
					var scrtop = window.pageYOffset;
					window.location.href = '../burst/sklad.php?mod_id='+id+'&scrtop='+scrtop;
				}

В переменную scrtop попадает значение прокрутки и отправляется на сервер. 

Но как мне добавить при отправке формы, новую переменную scrtop в эту форму ?

Я ранее так уже делал, с помощью document.getElementById("...").innerHTML изменял HTML страницы, а именно строку со скрытой переменной формы и она замечательно отправлялась.

А вот как я это делал, не могу вспомнить.

Подскажите, современный JS так делать умеет, или уже всё и так делать стало нельзя ?

Спасибо.

<td>
	<span class="qty-minus" onclick="qtyMinus(); return false;" data-id="<?=$id;?>" data-qty="<?= $item['qty'];?>" data-weight="<?=$item['weight'];?>">
		<i class="bi bi-dash-circle-fill text-success"></i>
	</span>
	<span class="qty"><?= $item['qty'];?></span>
	<span class="qty-plus" onclick="qtyPlus(); return false;" data-id="<?=$id;?>" data-qty="<?= $item['qty'];?>" data-weight="<?=$item['weight'];?>">
		<i class="bi bi-plus-circle-fill text-success"></i>
	</span>
</td>

js:
 

// Изменение количества товара в заказа - плюс
function qtyPlus() {
    $('.qty-plus').on('click', function(){
        let str = $(this).data('id');
        if(typeof str === 'string'){
            let id_arr = str.split('-'),
                id = id_arr[0],
                mod = id_arr[1],
                qty_update = $(this).data('qty')+1,
                weight = $(this).data('weight');
            $.ajax({
                url: '/cart/add',
                data: {id: id, qty_update: qty_update, mod: mod, weight:weight},
                type: 'GET',
                success: function(res){
                    showCart(res);
                },
                error: function(){
                    alert('Ошибка! Попробуйте позже');
                }
            });
        }else if(!Number.isNaN(str)){
            let id = $(this).data('id'),
                mod = null,
                qty_update = $(this).data('qty')+1,
                weight = $(this).data('weight');
            $.ajax({
                url: '/cart/add',
                data: {id: id, qty_update: qty_update, mod: mod, weight:weight},
                type: 'GET',
                success: function(res){
                    showCart(res);
                },
                error: function(){
                    alert('Ошибка! Попробуйте позже');
                }
            });
        }
    });
    return true;
}
// Изменение количества товара в заказа - минус
function qtyMinus() {
    $('.qty-minus').on('click', function(){
        let str = $(this).data('id');
        if(typeof str === 'string'){
            let id_arr = str.split('-'),
                id = id_arr[0],
                mod = id_arr[1],
                qty_update = $(this).data('qty')-1,
                weight = $(this).data('weight');
            $.ajax({
                url: '/cart/add',
                data: {id: id, qty_update: qty_update, mod: mod, weight:weight},
                type: 'GET',
                success: function(res){
                    showCart(res);
                },
                error: function(){
                    alert('Ошибка! Попробуйте позже');
                }
            });
        }else if(!Number.isNaN(str)){
            let id = $(this).data('id'),
                mod = null,
                qty_update = $(this).data('qty')-1,
                weight = $(this).data('weight');
            $.ajax({
                url: '/cart/add',
                data: {id: id, qty_update: qty_update, mod: mod, weight:weight},
                type: 'GET',
                success: function(res){
                    showCart(res);
                },
                error: function(){
                    alert('Ошибка! Попробуйте позже');
                }
            });
        }
    });
    return true;
}

Суть в том, что клик срабатывает только со второго раза... Почему?
Страница: https://shop-site.su/category/men

Нужно положить товар в корзину и либо в модальном окне, либо перейти на страницу оформления заказа (а лучше и там и там покликать) и покликать на плюс и минус кол-ва товара.

Решил проблему:
убрал из html вызов функции onclick="qtyMinus(); return false;"

а js переделал вот так:
$('body').on('click', '.qty-minus', function(){...});

Но вот ответ на вопрос почему, все же хотелось бы знать.

Такая проблема:

Есть AJAX добавление товара в корзину. Товар добавляется и появляется в корзине. Но после нажатия кнопки "вернуться" в браузере, товар исчезает из корзины. Хотя в сессии php он записан — после перезагрузки страницы товар снова появляется в корзине.

Подскажите, в чем может быть дело?

Читал про стрелочные функции, но так и не разобрался. 

Так как все-таки это сделать?

 

const newPost = (post, addedAt = Date()) => ({
    ...post,
    addedAt,
})

const firstPost = {
    id: 1,
    author: 'Nick',
}

console.log(newPost(firstPost))

Есть форма одна , нужно под каждую модель сделать отдельную
Я делал другую форму и прикреплял к другой модели "Карпатська",  форма работает но не отправляет на телеграм заявку.
Помогите пожалуйста, я не особо шарю, а тот кто делал натягивает на деньги постоянно. Просто пример а дальше я уже сам смогу.

https://test.xn--80apgcl9h.com.ua/

<!--Код форми start-->

<div id="form-color" class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true"> 
  <div class="modal-dialog modal-lg"> 
    <div class="modal-content"> 
            <div class="left-form"> 
            <div class="colot-tr"> 
                <div class="title-free" >БЕЗКОШТОВНА ДОСТАВКА. ОПЛАТА ПРИ ОТРИМАННІ</div> 
                <div class="color-form"> 
                <div class="vubir">Виберіть колір ялинки</div> 
                <div class="color">
                    <div class="colore">Зелена</div> 
                    </div>

                  <div class="green"> 
                        <label><input type="radio" name="radio_0" value="Блакитна"> <span style="background: rgb(255, 255, 255);"></span ></label> 
                    <img src="blakbtna.jpeg" alt="" class="js-resize-height" style="height: 283px;"> 
                    <div class="colore">Блакитна</div> 
                    < /div> 
                </div> 
                </div               
            </div> 
            <div class="form-zakaz"> 
            <div class="title-zaka">Оформлення замовлення</div>
                <form id=" zakaz1"> 
                    <input type="text" name="name" placeholder="Ваше Ім'я" обов'язково />
                    <input type="text" name="phone" id="phoner2" placeholder="Ваш Телефон" обов'язково /> 
                    <input type="hidden" name="rpicer" value="" id="rpicer" / > 
                    <input type="hidden 
                    " name="razmer" value="" id="razmer" /> <input type="hidden" name="namer" value="" id="namer" /> 
                    <input type ="hidden" name="colore" value="" id="colore" /> 
                    <input type="hidden" name="utm_source" value="" id="property_utm_source" />
                    <input type= "hidden" name="utm_medium" value="" id="property_utm_medium" /> 
                    <input type="hidden" name="utm_campaign" value="" id="property_utm_campaign" />
                    <input type="submit" class = "add btn btn-primary btn-lg btn-block boc_order_btn" value="Замовити" /> 
                    <div class="policec">Натискаючи на кнопку "Замовити", я даю свою згоду на обробку персональних даних і приймаю <a href="/policy/">умови угоди</a></div> 
                </form>
            </div> 
            </div> 
            <div class="right-form"> 
                <div class ="logo"><img src="https://whitesaas.com.ua/uploaded/quizes/61838/expert_photo/ln_7259b3b11fc527ae5b4a50fde874567c0357c76a1633962165.png" /></div > 
                <div class="name-pr">Ковалівська Premium 
зелена/чорна</div> 
                <div class="roxmir">150см</div>
                <div class="price-form">2570 грн</div> 
                < div class="col-form"></div> 
            </div> 
            <div class="right-form"></div> 
    </ div> 
  </div> 
</div>

<!-- код формы finish-->

Еще такое
 

$('.cupiti').on('click', function(){
$('.colot-tr').show();
$('.form-zakaz').hide();
var prodid= $(this).data('id');
var inprod='#prod-' +prodid;
var razmer = $(inprod).find('input:checked').data('raz') + 'cm.';
var rpicer =  $(inprod).find('.new-price').text();
var namer =  $(inprod).find('.product-name-h').html();
var namers =  $(inprod).find('.product-name-h').text();
$('#form-color .price-form').text(rpicer);
$('#form-color .roxmir').text(razmer);
$('#form-color .name-pr').html(namer);
$('#rpicer').val(rpicer);
$('#razmer').val(razmer);
$('#namer').val(namers);
    
 $('#form-color').modal('show');
     
});



$('.color input').on('change', function(){
 var colores = $('.color').find('input:checked').val();
 $('#colore').val(colores);
$('.colot-tr').hide();
$('.form-zakaz').show();
});

$("#zakaz1").submit(function (event) {
    event.preventDefault();
    
     let fd = $(this).serialize();
     
     $.ajax({
      url: "sender.php",
     type: 'POST',
    data: $(this).serialize(),
      success: function (data) {
      
     
            setTimeout(() => {
            document.location.href = '/thanks.html'
          }, 2000);
      
     }
    
    
    
    });
    
    });
    
    $("#zakaz2").submit(function (event) {
    event.preventDefault();
    
     let fd = $(this).serialize();
     
     $.ajax({
      url: "sender2.php",
     type: 'POST',
    data: $(this).serialize(),
      success: function (data) {
      
     
            $('.form-zakaz').html('<div class="sec">Ваше замовленя відправлено</div>');
          setTimeout(() => {
             $('#form-color').modal('hide');
          }, 4000);
      
     }
    
    
    
    });
    
    });

всем привет, не получается открыть ссылку на сайте я думаю из-за js но не могу найти что либо помогите пожалуйста.

W O L F - W1987W.txt

$('#button1').on('click', () => {
   let text = $('#options_value').html();
   text = text.replaceAll('<br>', "\n");
   navigator.clipboard.writeText(text);
});

<div class="content">
  <button class="modal-btn" data-path="first" data-animation="fadeInUp" data-speed="1500">Открыть окно 1</button>
</div>
<div class="modal">
  
  <div class="modal__wrapp" data-target="first">
    <div class="modal__content">
      <button class="modal__close">Закрыть</button>
      модальное окно
      <button data-path="policy">Политика</button>
    </div>
  </div>

  <div class="modal__wrapp" data-target="policy">
    <div class="modal__content">
      <button class="modal__close">Закрыть</button>
      политика
    </div>
  </div>

</div>

.modal {
	--transition-time: 0.3s;
	position: fixed;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 1000;
	cursor: pointer;
	overflow-y: auto;
	overflow-x: hidden;
	text-align: center;
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--transition-time), visibility var(--transition-time);
}

.modal__wrapp {
	display: none;
	cursor: default;
    width: fit-content;
    height: fit-content;
}


.modal__content{
    position: absolute;
    left: 500px;
  width: 500px;
  height: 500px;

  display: flex;
  color: white;
  flex-direction: column;
  text-align: left;
  background-color: #000;
}

.modal__content button{
  width: 200px;
  height: 50px;
  margin: 50px 0;
}

.modal.is-open {
	opacity: 1;
	visibility: visible;
	transition: opacity var(--transition-time), visibility var(--transition-time);
}

.modal__wrapp.modal-open {
	display: flex;
}


.disable-scroll {
	position: relative;
	overflow: hidden;
	height: 100vh;
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
}

.fade {
	opacity: 0;
	transition: opacity var(--transition-time);
}

.fade.animate-open {
	opacity: 1;
	transition: opacity var(--transition-time);
}

.fadeInUp {
	opacity: 0;
	transform: translateY(vw(-100));
	transition: opacity var(--transition-time), transform var(--transition-time);
}

.fadeInUp.animate-open {
	opacity: 1;
	transform: translateY(0);
	transition: opacity var(--transition-time), transform var(--transition-time);
}

.modal__wrapp[data-target="policy"] .modal__content{
  left: 1050px;
  background-color: #000;
  opacity: .5;
}

class Modal {
	constructor(options) {
		let defaultOptions = {
			isOpen: () => {},
			isClose: () => {},
		}
		this.options = Object.assign(defaultOptions, options);
		this.modal = document.querySelector('.modal');
		this.speed = false;
		this.animation = false;
		this.isOpen = false;
		this.modalContainer = false;
		this.previousActiveElement = false;
		this.fixBlocks = document.querySelectorAll('.fix-block');
		this.focusElements = [
			'a[href]',
			'input',
			'button',
			'select',
			'textarea',
			'[tabindex]'
		];
		this.events();
	}

	events() {
		if (this.modal) {
			document.addEventListener('click', function(e){
				const clickedElement = e.target.closest('[data-path]');
				if (clickedElement) {
					let target = clickedElement.dataset.path;
					let animation = clickedElement.dataset.animation;

					if (clickedElement.classList.contains('modal-close')) {
						this.close();
					  }

					let speed = clickedElement.dataset.speed;
					this.animation = animation ? animation : 'fade';
					this.speed = speed ? parseInt(speed) : 300;
					this.modalContainer = document.querySelector(`[data-target="${target}"]`);
					this.open();
					return;
				}
				

				if (e.target.closest('.modal__close')) {
					this.close();
					return;
				}
			}.bind(this));

			window.addEventListener('keydown', function(e) {
				if (e.keyCode == 27) {
					if (this.isOpen) {
						this.close();
					}
				}

				if (e.keyCode == 9 && this.isOpen) {
					this.focusCatch(e);
					return;
				}

			}.bind(this));

			this.modal.addEventListener('click', function(e) {
				if (!e.target.classList.contains('modal__wrapp') && !e.target.closest('.modal__wrapp') && this.isOpen) {
					this.close();
				}
			}.bind(this));
		}
	}

	open() {
		this.previousActiveElement = document.activeElement;

		this.modal.style.setProperty('--transition-time', `${this.speed / 1000}s`);
		this.modal.classList.add('is-open');
		this.disableScroll();
		
		this.modalContainer.classList.add('modal-open');
		this.modalContainer.classList.add(this.animation);

		setTimeout(() => {
			this.options.isOpen(this);
			this.modalContainer.classList.add('animate-open');
			this.isOpen = true;
			this.focusTrap();
		}, this.speed);
	}

	close() {
		if (this.modalContainer) {
			this.modalContainer.classList.remove('animate-open');
			this.modalContainer.classList.remove(this.animation);
			this.modal.classList.remove('is-open');
			this.modalContainer.classList.remove('modal-open');

			this.enableScroll();
			this.options.isClose(this);
			this.isOpen = false;
			this.focusTrap();
		}
	}

	focusCatch(e) {
		const focusable = this.modalContainer.querySelectorAll(this.focusElements);
		const focusArray = Array.prototype.slice.call(focusable);
		const focusedIndex = focusArray.indexOf(document.activeElement);

		if (e.shiftKey && focusedIndex === 0) {
			focusArray[focusArray.length - 1].focus();
			e.preventDefault();
		}

		if (!e.shiftKey && focusedIndex === focusArray.length - 1) {
			focusArray[0].focus();
			e.preventDefault();
		}
	}

	focusTrap() {
		const focusable = this.modalContainer.querySelectorAll(this.focusElements);
		if (this.isOpen) {
			focusable[0].focus();
		} else {
			this.previousActiveElement.focus();
		}
	}

	disableScroll() {
		let pagePosition = window.scrollY;
		this.lockPadding();
		document.body.classList.add('disable-scroll');
		document.body.dataset.position = pagePosition;
		document.body.style.top = -pagePosition + 'px';
	}

	enableScroll() {
		let pagePosition = parseInt(document.body.dataset.position, 10);
		this.unlockPadding();
		document.body.style.top = 'auto';
		document.body.classList.remove('disable-scroll');
		window.scroll({ top: pagePosition, left: 0 });
		document.body.removeAttribute('data-position');
	}

	lockPadding() {
		let paddingOffset = window.innerWidth - document.body.offsetWidth + 'px';
		this.fixBlocks.forEach((el) => {
			el.style.paddingRight = paddingOffset;
		});
		document.body.style.paddingRight = paddingOffset;
	}

	unlockPadding() {
		this.fixBlocks.forEach((el) => {
			el.style.paddingRight = '0px';
		});
		document.body.style.paddingRight = '0px';
	}
}

const modal = new Modal({
	isOpen: (modal) => {
		console.log(modal);
		console.log('opened');
	},
	isClose: () => {
		console.log('closed');
	},
});

Так как мне надо сделать несколько таких на одной странице, является ли возможным список сделать в отдельном файле, и ссылаться на него?

В js не шарю совсем! Прошу помочь или просто навести на мысль! Спасибо)

Элементы создаются, но не получается задать им надпись, хотя раньше, создавая их вручную в HTML, всё получалось..

vk-groups-3.html vk-groups-1.html

наладил..

vk-groups-3.html

Мне необходимо изменить источник загрузки курсов на ЦБ РФ вот по этой ссылке: https://www.cbr.ru/scripts/XML_daily.asp

А также мне необходимо установить ограничение на количество обращений к сайту ЦБ РФ - 1 раз в сутки. При частом обращении, могут заблокировать.

Вот в этом js файле находятся настройки конвертера:

const from_currencyEl = document.getElementById('from_currency');
const from_ammountEl = document.getElementById('from_ammount');
const to_currencyEl = document.getElementById('to_currency');
const to_ammountEl = document.getElementById('to_ammount');
const rateEl = document.getElementById('rate');
const exchange = document.getElementById('exchange');

from_currencyEl.addEventListener('change', calculate);
from_ammountEl.addEventListener('input', calculate);
to_currencyEl.addEventListener('change', calculate);
to_ammountEl.addEventListener('input', calculate);

exchange.addEventListener('click', () => {
	const temp = from_currencyEl.value;
	from_currencyEl.value = to_currencyEl.value;
	to_currencyEl.value = temp;
	calculate();
});

function calculate() {
	const from_currency = from_currencyEl.value;
	const to_currency = to_currencyEl.value;
	
	fetch(`https://api.exchangerate-api.com/v4/latest/${from_currency}`)
		.then(res => res.json())
		.then(res => {
		const rate = res.rates[to_currency];
		rateEl.innerText = `1 ${from_currency} = ${rate} ${to_currency}`
		to_ammountEl.value = (from_ammountEl.value * rate).toFixed(2);
	})
}

calculate();

Как мне изменить настройки в этом файле чтобы курсы брались с https://www.cbr.ru/scripts/XML_daily.asp и включить ограничение на количество обращений по ссылке cbr.ru - 1 раз в сутки?

Заранее спасибо всем, кто хотел помочь с решением этой задачи.

Всё получилось кроме одного: при нажатии на кнопку выводится только " Ответ: Фамилия", а слово " Здравствуйте" и имя почему-то не выводятся.

Даю ссылку на файл.

https://disk.yandex.ru/d/6n834dYn8ForIw

Заранее спасибо. С уважением, Наташа.

x1.html oxo4.html

let zSpacing = -1000,
		lastPos = zSpacing / 5,
		$frames = document.getElementsByClassName('frame'),
		frames = Array.from($frames),
		zVals = []

window.onscroll = function() {

	let top = document.documentElement.scrollTop,
			delta = lastPos - top

	lastPos = top

	frames.forEach(function(n, i) {
		zVals.push((i * zSpacing) + zSpacing)
		zVals[i] += delta * -5.5
		let frame = frames[i],
				transform = `translateZ(${zVals[i]}px)`,
				opacity = zVals[i] < Math.abs(zSpacing) / 1.5 ? 1 : 0
		frame.setAttribute('style', `transform: ${transform}; opacity: ${opacity}`)
	})

}

Текст и фото скролятся отлично но если в текст вставить ссылку или кнопку, то они не активными становятся. Если поменять свойство текста, вместо relative  на ststic,  ссылка работает нормально но уже понятно что её уже не подвинуть. Я не понимаю почему эти ссылки появляются но не работают, ведь если дело в том, что ты должен попасть на нужный фрейм что бы активировать ссылку то почему в таком случае работает static, при том что он тоже появляется и исчезает? 

  И как вообще сделать, что бы ссылка была активна и работала всё время, с появления и до исчезновения?

				<fieldset align="left" style="width:300px">
					<legend>Langs?</legend> 
					<input type="checkbox" name="lan" value="1"> lang1 <br>
					<input type="checkbox" name="lan" value="200"> lang2 <br>
					<input type="checkbox" name="lan" value="400"> lang3 <br>
					<input type="checkbox" name="lan" value="600"> lang4 <br>
					<input type="checkbox" name="lan" value="800"> lang5 <br>
					<input type="checkbox" name="lan" value="1000"> lang6 <br>
					<input type="text" name="output1" size=10>
					<input type="button" value="Sum" onClick="grand()">
					<input type="reset" value="Reset">
				</fieldset>

И чтобы после нажатия, число выводилось в <input type="text" name="output1" size=10>? Буду благодарен!

<!DOCTYPE HTML>
<html lang="kz">
<head>
    <meta charset="utf-8">
<title> ВЫВОД </title>
</head>
<body>
   <input type="text" name="Vvod" value="Пример" placeholder="введите имя">
<input type="text" name="Vyvod">
<br>
<input type="submit"></button>
<br>
<script type="text/javascript">
    function submit() {
    let Vvod=document.getElementsByTagName('Vvod');
    Vyvod.value=Vvod;
    console.log(Vyvod.value);
    }
</script>  
</body>
</html>

Вот fetch код:

const countryList = document.querySelector('.form-list.country');

fetch('https://restcountries.com/v3.1/all').then(res => {
  return res.json();
}).then(data => {
  let output = '';
  data.forEach(country => {
    output += `<li class="form-item" data-value="${country.name.common}">${country.name.common}</li>`;
    countryList.innerHTML = output;
  });
}).catch(err => {
  console.log(err);
});

полный код html, css, js Во втором списке "Country" список формируется, но название страны не поставляется в форму, а атрибут "data-value="" " в инпут ниже. В первом списке "Guests Amount" все ок, т.к. данные прописаны в html. Нужен такой же, но со странами.

Сразу скажу, с тегом select все работает, но мне нужна стилизованная выпадашка. Заранее спасибо.