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

Question

[maxgeor]

Добрый день.
Есть код JS на сайте

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

console.clear();

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

var c = document.getElementById('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();

но он срабатывает только в одном в первом блоке, а в блоках ниже он не работает.
Но если его не ставить в блок № 1 а сразу поставить в блок № 2 (который ниже) он работает.
Как сделать, что бы он работал и в первом и во втором и в третьем блоке ?
Спасибо.

Answer 1

[Кирилл Никитин]

В документе может быть только один id со значением output.
Можно попробовать поменять на класс и getElementsByClassName. Проблема в том, что getElementsByClassName работает с массивами и тут нельзя вызвать getContext напрямую, нужна обёртка forEach.

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

Вот как-то так...

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

var c = document.getElementsByClassName('output');

c = Array.prototype.slice.call(c);

c.forEach(function (c) {

var 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();

});

Comments

[maxgeor]

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

[maxgeor]

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

<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();

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

[Тарас Шульга]

maxgeor, 3 строка оно ищет один тег гейм, у тебя их там несколько, а работает именно по ид все ещё #грусть

[maxgeor]

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

[Тарас Шульга]

maxgeor, а не проще взять один клас - и повесить на все элементы?)

[maxgeor]

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

[maxgeor]

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

<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();

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

[maxgeor]

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

[Кирилл Никитин]

maxgeor, пардон, ответил уже по дороге ко сну.

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

Да, но не только. Сейчас дополню ответ.

[maxgeor]

Кирилл Никитин, И ЭТО РАБОТАЕТ !!!!

[maxgeor]

Кирилл Никитин, Я прошу прощения но Вы всё это время

ответ написан 10 часов назад

Вы случайно ни этим занимались ?!?!?!

[Кирилл Никитин]

maxgeor, нет ) Я перед сном заглянул на тостер, дал основной ответ и пошёл спать, ибо уже прям рубило. Ну а сейчас заглянул и понял, что надо, видимо, дополнить.

[maxgeor]

Кирилл Никитин, я искренни Вам Благодарен !
Желаю Успеха в Творчестве !
Да прольёт Космос на Вас Анхель - инсайтов и катарсисов !
Спасибо!!!

[Кирилл Никитин]

maxgeor, спасибо. Удачи!

[maxgeor]

Кирилл Никитин, Добрый день.
Я Извиняюсь, когда ставиш разные картинки в разные
<canvas class="output"></canvas>
то отображается во всех <canvas class="output"></canvas>одна и та-же картинка которая самая верхняя. Перепроверял несколько раз это точно разные картинки.
Вы не знаете как это победить?
Ну что бы картинки отображались всё-таки разные.
Спасибо!

[maxgeor]

Кирилл Никитин, я когда вчера проверял я сильно не заморачивался . Я скопировал верхнюю и вставил ниже - отобразились две одинаковые. На вчерашней - эйфории решил завтра всё сделаю. Ну и вот результат ...

[Кирилл Никитин]

maxgeor, ну естественно, ведь id c input тоже должен быть только один. Вы чего вообще сделать хотите?

[maxgeor]

Кирилл Никитин, Добрый день! Я прошу прощение за простоту . Есть такой Pen
А я хочу вставить на одну страницу HTML несколько но разных изображений. Вчера когда пробовал ваш код, я просто скопировал это-же изображение и вставил ниже...
Вот.

[maxgeor]

Кирилл Никитин,

id c input тоже должен быть только один

Ну да мне уже это напомнили, я подумал - ну он-же родитель , а output они же вложены... и на этом и строил надежды что - поедет))

[Кирилл Никитин]

maxgeor, ну он не родитель, а скорее источник данных и output тоже сам по себе. Тут наверно уже надо всё переписывать и каким-то из способов отделять сами изображения от действий с ними. Сам я сейчас в запарке, попробуйте может новый вопрос создать, возможно поможет кто-то. Тут в любом случае уже вышло за рамки этого вопроса, только сформулируйте получше.

[maxgeor]

Кирилл Никитин, Я в сотый раз прошу прощение, но если там всё - сложно, то я - перебьюсь. Мне будет не комфортно если вы потратите на это много своего времени.

[maxgeor]

Кирилл Никитин, да-да именно так я и сделаю.
Кирил ещё раз Спасибо и Всего Самого Наилучшего!!!

Answer 2

[Арсений Матыцин]

Чтобы захватить несколько элементов на странице надо использовать селектор, который собирает все (существующие на момент работы скрипта), например через querySelectorAll('.classname').

А затем проходится по массиву через forEach и к каждому привязывать то, что тебе нужно.

Ну и как выше указали, ID это уникальный идентификатор, вместо него надо использовать одинаковый класс.

Answer 3

[maxgeor]

Арсений Матыцин, т.е. мне нужно вместо
var c = document.getElementById('output'),
этот код
querySelectorAll('.output .output_2 .output_3')