.form__input_stage{
display: none;
}
.form[data-stage="1"] .form__input_stage[data-stage="1"]{
display: block;
}
.form[data-stage="2"] .form__input_stage[data-stage="2"]{
display: block;
}<form action="" class="form" data-stage="1">
<input type="text" class="form__input">
<input type="text" class="form__input form__input_stage" data-stage="1">
<input type="text" class="form__input form__input_stage" data-stage="2">
</form>var form = document.querySelector('.form');
form.addEventListener('change', formChangeHandler);
function formChangeHandler(evt){
var stage = Number(evt.target.dataset.stage);
var nextStage = stage+1;
form.dataset.stage = nextStage;
}<классическое отступление>
Делать подобные вещи, а так же переопределять прототип - считается плохим тоном.
Написание, как Вы выразились "обёртки" - лучший выбор.
</классическое отступление>var cityBox = document.querySelector("#cityBox");
var anotherCity = document.querySelector("#another");
anotherCity.addEventListener("click", anotherCityHandler);
function anotherCityHandler() {
cityBox.innerHTML = '<p class="city__title">Choose a city:</p><input type="text" class="city__input input" placeholder="Enter city" />'
}$.ajax({
url: url,
type: 'POST',
processData: false,
data: arrayBuffer,
headers: {
"content-length": arrayBuffer.byteLength
}
});"деёж".charCodeAt(0) // д -1076
"деёж".charCodeAt(1) // е - 1077
"деёж".charCodeAt(2) // ё - 1105
"деёж".charCodeAt(3) // ж -1078$('#slick1').slick({
rows: 2, // <-- вот что Вам нужно.
dots: false,
arrows: true,
infinite: true,
speed: 300,
slidesToShow: 6,
slidesToScroll: 6
});
<div id="main__display"></div>
<div class="images-controls">
<button type="button" class="images-controls__btn">1</button>
<button type="button" class="images-controls__btn">2</button>
<button type="button" class="images-controls__btn">3</button>
<button type="button" class="images-controls__btn">4</button>
</div>var collection = [
"https://via.placeholder.com/100",
"https://via.placeholder.com/200",
"https://via.placeholder.com/300",
"https://via.placeholder.com/400",
]
// Добавляем обработчик на контейнер кнопок
$('.images-controls').on('click', function(evt){
// evt - Объект события.
// Элемент, на котором произошёл клик:
var target = evt.target;
// проверяем, есть ли у этого элемента класс, присущий нашим кнопкам:
if(target.classList.contains('images-controls__btn')){
var btnIndex = $('.images-controls__btn').index(target); // Находим индекс этой кнопки из массива всех кнопок.
// Рендерим картинку, извлекая путь до картинки по индексу кнопки из коллекции
$("#main__display").html(
'<img src="' + collection[btnIndex] + '">'
)
}
});<select class="main-select " id="select">
<option value="2001">2001</option>
<option value="2002">2002</option>
<option value="2003">2003</option>
<option value="2004">2004</option>
<option value="2005">2005</option>
<option value="2006">2006</option>
<option value="2007">2007</option>
<option value="2008">2008</option>
</select>svg.innerHTML += Array(count).fill(0).map((e, i) => {
let len = seg * (i + 1), p = track.getPointAtLength(len);
return "<g transform=translate("+[p.x, p.y]+") class"+(i?'':'=active')+">" +
" <circle data-len="+len+" r=11 data-year="+(2001+i)+"></circle>" +
" <rect rx=5 ry=5 x=-20 y=16 width=40 height=19></rect>" +
" <text y=30 id='"+(2001+i)+"'>"+(2001+i)+"</text>"+
"</g>";
}).join('');
// Другой код без изменений
// Модифицируем обработчик клика по кружку
circles.forEach(c => c.onclick = e => {
circles.forEach(c1 => c1.parentNode.classList.toggle('active', c === c1));
targets.push(+c.dataset.len);
let root = c.parentElement;
let text = root.lastChild;
let circleYear = c.dataset.year; // получаем значение года из дата атрибута кружка, по которому произошёл клик.
let div = document.getElementById('text');
div.innerHTML = promoText[text.textContent].text;
var x = document.getElementById('select');
x.value = circleYear; // - устанавливаем значение селекта на то, которое совпадает с дата атрибутом данного кружка.
$(x).niceSelect('update'); // Так как используется библиотека niceSelect, а значение мы поменяли на исходном селекте, то обновляем niceSelect.
// x.options[x.selectedIndex].text= text.textContent; - код, который создавал, по-моему мнению, баг.
});
//Select
$(document).ready(function() {
$('select').niceSelect();
// Добавялем обработчик на изменение селекта, чтобы кораблик двигался, текст менялся. По факту, просто тригерим клик программно по кружку, у которого совпадающий по году дата-атрибут.
$('#select').on("change", function () {
$('circle[data-year="' + this.value + '"]').trigger('click');
});
});