Как сделать что бы JS работал в нескольких блоках на сайте?

возвращаю - id всё работает

Как сделать что бы JS работал в нескольких блоках на сайте?

Тарас Шульга,
я делаю так на один класс

<div id="wrap">
   <canvas class="output"></canvas>
    
</div>

console.clear();

var img = document.getElementById('input');

var c = document.getElementsByClassName('output'),
    ctx = c.getContext('2d');

c.width = img.width;
c.height = img.height;

var tic, sine, sineNormalized,
    start = Date.now();
    
var params = {
  AMP: 20,
  FREQ: 0.03,
  SPEED: 4,
  VERTICAL: true
};

function update() {
  tic = (Date.now() - start) * 0.001;
}

function render() {
  ctx.clearRect(0, 0, c.width, c.height);
  for(var i = 0; i < img.height; i++) {
    if(params.VERTICAL) {
      var ofs = params.AMP * (0.5 + (Math.sin(tic * params.SPEED + (i * params.FREQ)) * 0.5));
      ctx.drawImage(img,
                  0, i, img.width, 1,
                  0, i - (ofs * 0.5), img.width, 1 + ofs);
    } else {
      var ofs = params.AMP * Math.sin(tic * params.SPEED + (i * params.FREQ));
      ctx.drawImage(img,
                  0, i, img.width, 1,
                  0 + ofs, i, img.width, 1);
    }
    
  }
}

function loop() {
  requestAnimationFrame(loop);
  update();
  render();
}

$('nav input').on('input change', function() {
  var t = $(this).attr('data-param');
  if(t == 'VERTICAL') {
    params.VERTICAL = $(this).is(':checked');
  } else {
    params[t] = $(this).val();
  }
  
});

loop();

А он и с одним классом не работает.

Как сделать что бы JS работал в нескольких блоках на сайте?

Тарас Шульга, ну - да))
...я пробую.

Как сделать что бы JS работал в нескольких блоках на сайте?

Тарас Шульга,
а как прописать классы в
getElementsByClassName
несколько класов ?

Как сделать что бы JS работал в нескольких блоках на сайте?

Кирилл Никитин, я сделал так

<div id="wrap">
   <canvas class="output"></canvas>
    <canvas class="output_2"></canvas>
</div>

console.clear();

var img = document.getElementById('input');

var c = document.getElementsByClassName('output output_2'),
    ctx = c.getContext('2d');

c.width = img.width;
c.height = img.height;

var tic, sine, sineNormalized,
    start = Date.now();
    
var params = {
  AMP: 20,
  FREQ: 0.03,
  SPEED: 4,
  VERTICAL: true
};

function update() {
  tic = (Date.now() - start) * 0.001;
}

function render() {
  ctx.clearRect(0, 0, c.width, c.height);
  for(var i = 0; i < img.height; i++) {
    if(params.VERTICAL) {
      var ofs = params.AMP * (0.5 + (Math.sin(tic * params.SPEED + (i * params.FREQ)) * 0.5));
      ctx.drawImage(img,
                  0, i, img.width, 1,
                  0, i - (ofs * 0.5), img.width, 1 + ofs);
    } else {
      var ofs = params.AMP * Math.sin(tic * params.SPEED + (i * params.FREQ));
      ctx.drawImage(img,
                  0, i, img.width, 1,
                  0 + ofs, i, img.width, 1);
    }
    
  }
}

function loop() {
  requestAnimationFrame(loop);
  update();
  render();
}

$('nav input').on('input change', function() {
  var t = $(this).attr('data-param');
  if(t == 'VERTICAL') {
    params.VERTICAL = $(this).is(':checked');
  } else {
    params[t] = $(this).val();
  }
  
});

loop();

и он всё-равно не работает

Как сделать что бы JS работал в нескольких блоках на сайте?

Кирилл Никитин, т.е. getElementById я меняю на getElementsByClassName и добавляю классы в html ?

Какие есть мало - популярные площадки по продаже HTML шаблонов?

Алекс Глебов, Да-да это одни из немногих на русском языке.
Спасибо, что откликнулись!

Как найти автора (или продавца) шаблона?

Yana Tomkovich, Спасибо!

Как найти автора (или продавца) шаблона?

McBernar, я дал - ладу! Спасибо!
https://theme-fusion.com/

Как найти автора (или продавца) шаблона?

McBernar? я не понял это что? или кто? можно просто ссылку!

Модель монитора от которой у Вас не устают глаза и можно долго работать?

Saboteur, Спасибо! Снизил яркость до 20% - стало комфортней, а по контрастности у вас как ? Понимаю, что субъективно но всё-таки?

Не подхватываються CSS св-ва?

Менял в настройках редактора сочетание "возврат к последней правке" на Alt + q, а Ctrl + q даже не эргономично)

Не подхватываються CSS св-ва?

Максим, и я не понимаю.

Комбинация горячих клавиш для текстовых редакторов?

Ivan Bogachev, Спасибо!
Но что-то мне подсказывает, что Вы работаете с другой средой?

Файлова структура сайта, не - на CMS !?

Илья, - или Вы про повторы Хедеров и Футеров при написании?

Файлова структура сайта, не - на CMS !?

Илья, - одно из моих заблуждений, это то что дублируют страницы именно CMS `ки! Нет? Спасибо!

Файлова структура сайта, не - на CMS !?

Владислав Лысков, - т.е сегодня это index.php или CMS ?

Файлова структура сайта, не - на CMS !?

Олег, а прошлый век это про создание без CMS ?

Как зафиксировать дочерний div_3, а точнее -img в div_3, при вращении - родителя div_1?

Max Front, Павел Антонов, но position - по стабильней думаю будет!

Как зафиксировать дочерний div_3, а точнее -img в div_3, при вращении - родителя div_1?

Max Front, хотя -нет "поймал" по горизонту!