Mizutsune

document.querySelectorAll(".section").forEach(n => {
	let databox = n.querySelector("span");
	let input = n.querySelector(".hidden_price");
	input.value = databox.textContent;
});

const fn = (..args) => {
  // выходим из функции если элемент не найден
  if(!document.querySelector(".target-element-selector")) return;
  
  // код функции
};

if (window.location.href === "https://you-site.com/blog"){
   // код который нужно выполнить на странице blog
}

.is-active {
     animation-name: shake;
     animation-direction: alternate;
     animation-duration: 1s;
     animation-iteration-count: 4;
}

@keyframes shake {
     from {
          transform: translateX(0px);
     }
     to {
          transform: translateX(150px);
     }
}

const button = document.querySelector(".button");

button.classList.add("is-active");

button.addEventListener("animationend", (event) => {
     event.stopPropagation();
     button.classList.remove("is-active");
}, { once: true });

Создаю с нуля инпуты и кнопку для добавления новых элементов массива, добавляю, но цикл их не видит и не выводит в окно.

let li = document.createElement("li");
let content = `${elem.item}, цена ${elem.price}, номер ${elem.index}`;
li.textContent = content;
ul.appendChild(li);

but.addEventListener("click", () => {
    goods.push({
        item: input1.value,
        price: input2.value,
        index: input3.value,
    });

    ul.innerHTML = goods.map(({ item, price, index }) => {
        return `<li>${item}, цена ${price}, номер ${index}</li>`
    }).join("");
});

but.addEventListener("click", () => {
    goods.push({
        item: input1.value,
        price: input2.value,
        index: input3.value,
    });

    const { item, price, index } = goods[goods.length - 1];

    let li = document.createElement("li");
    let content = `${item}, цена ${price}, номер ${index}`;
    li.textContent = content;
    ul.append(li);
});

Почему не работает for внутри append?

const getSetOfElements = () => {
     let arr = [];

     for (let i = 1; i <= 6; i++) {
          arr.push(`<div class="test">${i}</div>`);
     }

     return arr;
}

const setOfElements = getSetOfElements();

$('.second').append(`<p>hello</p> ${setOfElements.join("")}`);

const setOfElements = [...Array(6)].map((_, i) => (`<div class="test">${i + 1}</div>`)).join("");

$('.second').append(`<p>hello</p> ${setOfElements}`);

slider("#target-element-id-1");
slider("#target-element-id-2");

document.querySelectorAll(".element").forEach(n => slider(n));

const targetElement = document.querySelector(".player-selector");

const observer = new MutationObserver((mutations) => {
     mutations.forEach(({ target: t }) => {
          t.classList.contains("is-finished") ?
               alert("element contains class") :
               alert("element does not contain a class");
     })
});

observer.observe(targetElement, {
     attributes: true,
     attributeFilter: ['class']
});

- console.log(e.target.parentElement.classList.contains["valide"]);
+ console.log(e.target.parentElement.classList.contains("valide"));

- if (e.target.parentElement.classList.contains["valide"]);
+ if (e.target.parentElement.classList.contains("valide"));

const accordions = document.querySelectorAll('.accordion');
const accordionsButtons = document.querySelectorAll(".accordion__tittle")
const accordionsDataboxes =  document.querySelectorAll(".accordion__content");

accordions.forEach(n => {
     const currentButton = n.querySelector(".accordion__tittle");
     const currentDatabox = n.querySelector(".accordion__content");

     const toggleActiveElements = () => {
          accordionsButtons.forEach(v => {
               if (v !== currentButton) {
                    v.classList.remove("open");
               }
          });

          accordionsDataboxes.forEach(v => {
               if (v !== currentDatabox) {
                    v.classList.remove("open");
                    v.style.setProperty("--height", "0px");
               }
          });

          currentButton.classList.toggle("open");
          currentDatabox.classList.toggle("open");

          currentDatabox.classList.contains("open")
               ? currentDatabox.style.setProperty("--height", `${currentDatabox.scrollHeight}px`)
               : currentDatabox.style.setProperty("--height", "0px");
     };

     currentButton.addEventListener("click", toggleActiveElements);
});

.accordion__content.open {
    max-height: var(--height, 0);
  }

const slider = $(".slider").slick({
     centerMode: true,
     slidesToShow: 4
});

const breakpoint = window.matchMedia("(max-width: 992px)");

const breakpointChecker = () => {
   if (breakpoint.matches) {
      slider.slick('init');
   } else {
      slider.slick('destroy');
   }
};

breakpoint.addEventListener("change", breakpointChecker);
breakpointChecker();

<button class="trigger" data-text="Hello">Скопировать</button>

const button = document.querySelector(".trigger");
const dataText = button.dataset.text.trim();

button.addEventListener('click', e => {

  if(!dataText.length) return;
  
  navigator.clipboard.writeText(dataText)
    .then(() => console.log("Done!"))
    .catch(err => console.error(err))
})

document.addEventListener("DOMContentLoaded", () => { 
   const input = document.querySelector("input");
   const targetElement = document.querySelector("#res");
   
    targetElement.innerHTML = input.value;
})

const parent = this.closest('.parent-selector');
const child = parent.querySelector(".b24-form-control-label");