Во что обернуть JS-код, чтобы он исправно работал?

Question

[damarkuzz]

Здравствуйте. Во что принято оборачивать JS-код в потоке кода, чтобы он не мешал прочим параметрам?
В JS слабоват, но на практике приходилось использовать вот такой прием:
jQuery(document).ready(function($) {
Сам код прилагаю. Спасибо!

const checkbox = document.getElementById('link5')

checkbox.addEventListener('change', (event) => {
  if (event.target.checked) {
    document.getElementById('tab1').style.display = 'block';
  } else {
    document.getElementById('tab1').style.display = 'none';
  }

Comments

[Mikhail Osher]

так загуглите "jQuery document ready js equivalent"

[Евгений Самсонов]

> чтобы он не мешал прочим параметрам?
Это как?

Если хотите, чтобы переменные не попадали в общую область видимости, то оберните в функцию

(function() {
    // здесь ваш код
})();

(при условии, что переменные объявлены с помощью const, let или var)

[damarkuzz]

Евгений Самсонов, я про то, чтобы не было как в css, дублировал "}" и все поехало.
Плохо знаю семантику на данный момент, но нужен этот кусочек

[Евгений Самсонов]

damarkuzz, Так и не понял, что вы хотите добиться

[damarkuzz]

Евгений Самсонов, добавить этот скрипт на сайт, чтобы браузер в консоли не жаловался на "неожиданный символ". Просто правильно добавить)
Извините за некомпетентость

[Евгений Самсонов]

damarkuzz, Просто не работает код? Тогда не хватает скобок закрывающих

const checkbox = document.getElementById('link5')

checkbox.addEventListener('change', (event) => {
  if (event.target.checked) {
    document.getElementById('tab1').style.display = 'block';
  } else {
    document.getElementById('tab1').style.display = 'none';
  }
})

[damarkuzz]

Евгений Самсонов, помогло, спасибо. Понял над чем работать.
Подскажите, пожалуйста, а как сделать, чтобы не ругалось на код ниже, что константа уже задана. Необходимо указать их для многих элементов, нельзя как-либо через запятую указать getElementById?

const checkbox = document.getElementById('link5')

checkbox.addEventListener('change', (event) => {
if (event.target.checked) {
document.getElementById('tab1').style.display = 'block';
} else {
document.getElementById('tab1').style.display = 'none';
}
})

const checkbox = document.getElementById('link6')

checkbox.addEventListener('change', (event) => {
if (event.target.checked) {
document.getElementById('tab2').style.display = 'block';
} else {
document.getElementById('tab2').style.display = 'none';
}
})

[Евгений Самсонов]

damarkuzz, оформил как ответ.

Переименуйте вторую константу, например, в checkbox1

const checkbox1 = document.getElementById('link6')

checkbox1.addEventListener('change', (event) => {

Вообще лучше задавать понятные имена, в зависимости от функциональности чекбокса

Answer 1

[Евгений Самсонов]

Не хватает закрывающих скобок

const checkbox = document.getElementById('link5')

checkbox.addEventListener('change', (event) => {
  if (event.target.checked) {
    document.getElementById('tab1').style.display = 'block';
  } else {
    document.getElementById('tab1').style.display = 'none';
  }
})

Comments

[damarkuzz]

Подскажите, у меня вот у меня еще будет tab1, tab2 ...tab 20, как в одной константе прописать все ID, чтобы не пришлось по 20 таких кусков делать?
Соответственно, и link5 растут до 20 в прогрессии

[Евгений Самсонов]

damarkuzz, сделать функцию, передавать параметром "tab1, tab2 ...tab 20"