Сергей delphinpro

function getCurrentOffset(s) {
  return s.split(",", 2).map((n) => Number(n.replace(/\D/g, "")));
}
function right2_m() {
  const box = document.getElementById("box");
  let [left, top] = getCurrentOffset(box.style.transform);
  box.style.transform = `translate(${left+30}px,${top}px)`;
}
function bottom2_m() {
  const box = document.getElementById("box");
  let [left, top] = getCurrentOffset(box.style.transform);
  box.style.transform = `translate(${left}px,${top+30}px)`;
}

<script src="file.php"></script>

file.php

<?php

header('Content-Type: text/javascript');

echo 'alert("boom")';

Использовать цикл

const els = [
    ["author", "Author - "],
    ["name", "Name"],
    ["currentTime", "00:00"],
    ["duration", "00:00"],
];

els.forEach(el => {
    titleElement.appendChild(
        create({
            el: "span",
            className: el[0],
            text: el[1],
        })
    );
})

2

const els = [
    { el: "span", className: "author",      text: "Author - " },
    { el: "span", className: "name",        text: "Name" },
    { el: "span", className: "currentTime", text: "00:00" },
    { el: "span", className: "duration",    text: "00:00" },
];

els.forEach( el => titleElement.appendChild( create(el) ) );

Update

А вообще это разнородные элементы. Зачем их по отдельности генерировать. Пусть будет один единственный элемент (компонент) - title. Gecnm у него будет шаблон, и пусть вы будете в этот шаблон передавать данные

function renderTitle (d) {
 return `
  <div class="title">
    <span class="currentTime">${d.time}</span>
    <span class="author">${d.author}</span> –
    <span class="name">${d.name}</span>
    <span class="duration">${d.duration}</span>
  </div>
  `;
}
xxx.insertAdjacentHTML('beforeend', renderTitle({
  author:   'Author - ',
  name:     'Name',
  time:     '00:00',
  duration: '00:00',
}));

недавно отвечал по этому поводу Почему переменная класса становится undefined при обращении из метода?

Я не заморачиваюсь, просто создаю отдельный файл, типа webpack.config.IDE.js (название любое, пофиг), в нем прописываю алиасы в формате конфига webpack и скармливаю этот файл IDE. Файл этот в коде не используется, исключительно для шторма. Нормально работает.

судя по переменной e могу предположить, что это обработчик события.

import { TMyClass } from './TMyClass';

const obj = new TMyClass;

addEventListener('click', obj.MyFunc.bind(obj))

или 

addEventListener('click', e => obj.MyFunc(e))

<div class="hiking__about_item_img">
  <img class="img1" src="img/about_hiking/1.png" alt="House and mountains in the background">
  <img class="img2" src="img/about_hiking/2.png" alt="Snowy mountains">
</div>

.hiking__about_item_img:not(.toggled) .img2,
.hiking__about_item_img.toggled .img1 {
    display: none;
}

document.querySelector('.hiking__about_item_img')?.addEventListener('click', e => {
    e.currentTarget.classList.toggle('toggled');
});

Даже не знаю с чего начать...
Ну начну с определений объектов Number и String (сами почитаете).

У объектов есть методы, объекты можно вызывать как функции.
Первый пример
Number(Math.pow(2, 4));
Здесь мы имеем два объекта Number и Math. У объекта Math вызывается метод pow, который возвращает некое значение. Это значение передается в качестве параметра в Number, вызываемый как функция для приведения переданного значения к числу.
То есть Number() ожидает параметр, и мы его туда передаем.

Второй пример.
str.toLowerCase().includes(s);
Здесь вы имеем объект String (строка в переменной str). У этого объекта куча методов, которые можно использовать. Здесь вызывается метод toLowerCase(). Этот метод НЕ принимает никаких параметров (смотрите документацию) и возвращает новый объект String. Затем у этого нового объекта String вызывается еще один метод includes(s)

const dscrs = document.querySelectorAll('.item__wrapper');
const ratings = document.querySelectorAll('.rating');

dscrs.forEach((wrapper) => {
        let dsrc = wrapper.querySelector('.item__dscr');
        let rating = wrapper.querySelector('.rating');

        dscr.addEventListener('click', function(e) {
            dscr.classList.toggle('item__dscr-active');
            let active = dscr.classList.contains('item__dscr-active');
         
            ratings.forEach(r => r.classList.remove('active'));
            rating.classList.toggle('active', active);
        })
})

-teaxtarea{
+textarea{
    margin:0;
    padding: 0;
    display: block;
  }

https://yandex.ru/search/?text=js+Intl
https://developer.mozilla.org/en-US/docs/Web/JavaS...

https://youmightnotneedjquery.com/

Посчитайте максимально возможное смещение. Оно будет равным суме ширин все слайдов и промежутков между ними, минус ширина контейнера слайдера.
Если текущее смещение (-currentIndex * 220) будет превышать максимальное, то не применять его.

Это сделает параграф невидимым для мышки

div p {
  pointer-events: none;
}

А так вы можете определить по какому элементу сделан клик

document.querySelector('div').addEventListener('click', e => {
  console.log(e.currentTarget); // Будет див, даже если кликнули на внутренний элемент
});

document.querySelector('div').addEventListener('click', e => {
  console.log(e.target.closest('div'));
  // Будет НАЙДЕН див, внутри которого, или на нем самом кликнули
});

containers.forEach((el) => {
  el.addEventListener("click", e => {
    e.currentTarget.querySelector('.element-3').classList.add('active');
  });
});