Как уменьшить javacsript?

Question

[Марат Агатов]

Как уменьшить код чтоб не писать вручную потом ?

let r = document.querySelector('input[class="myCheckBox1"]');
r.setAttribute('checked', 'true');
let l = document.querySelector('input[class="myCheckBox2"]');
l.setAttribute('checked', 'true');
let b = document.querySelector('input[class="myCheckBox3"]');
b.setAttribute('checked', 'true');

Answer 1

[maksam07]

Смотря что именно не писать вручную. дублирование двух строк или даже указание селектора. Но как вариант:

['myCheckBox1', 'myCheckBox2', 'myCheckBox3'].forEach(className => {
  let element = document.querySelector(`input[class="${className}"]`);
  element.setAttribute('checked', 'true');
});

Comments

[Марат Агатов]

Спасибо огромное облегчела работу в разы =))

Answer 2

[Ankhena]

Вообще в одну строчку

[...document.querySelectorAll('input[type="checkbox"]')].forEach(item => item.checked = true);

Либо перечисляете классы через запятую

querySelectorAll('.myCheckBox1, .myCheckBox2, .myCheckBox3')

Comments

[maksam07]

Ankhena, если у него более поверхностные знания в js,что показывает его код и вопрос, то ему немного легче будет разобраться в 3-х строках. Но если стоит задача - решить вопрос не смотря ни на что, то можно и одной строкой.

[Марат Агатов]

maksam07, тут просто не стондарная ситуация нужно было скрипт который ещё и считаем сумму radio кнопок и там вот такое вышло у меня:

const form = document.querySelector('form[id="quiz"]');

['myCheckBox1', 'myCheckBox2', 'myCheckBox3'].forEach(className => {
    let element = document.querySelector(`input[class="${className}"]`);
    element.setAttribute('checked', 'true');
});

form.addEventListener('change', () => {
    form.querySelector('.result').innerText = Array
        .from(form.querySelectorAll(':checked'))
        .reduce((acc, n) => acc + +n.getAttribute('pice') + +n.getAttribute('montage'), 0);
});

form.addEventListener('change', () => {
    form.querySelector('.old_result').innerText = Array
        .from(form.querySelectorAll(':checked'))
        .reduce((acc, n) => acc + +n.getAttribute('old_pice') + +n.getAttribute('old_montage'), 0);
});

form.dispatchEvent(new Event('change'));

Отправляться ещё все результаты будут на email =)
Использую modx revo

[Ankhena]

Марат Агатов, это дополнение ничего не меняет в том куске кода, который был в вопросе.

Скорее вопрос, как сократить и оставшееся.
Начать можно с объединения листнеров в один.
А эту штуку .from(form.querySelectorAll(':checked'))
Странные невалидные атрибуты заменить на data-атрибуты
Судя по опечатке pice вместо price, это вы их туда засунули, а не modx.

[Марат Агатов]

Ankhena, Если бы я использовал minishop то верно но тут была временая задача чтоб не гохывать много денег на проект, а решить ситуацию так, если добавиться то этот скрипт перенисти на другие страницы, так что написал специально так.

[Марат Агатов]

Ankhena, использую для реализации такой вариант migx + AjaxForm + script

[Ankhena]

Марат Агатов, если вы туда самостоятельно добавляете атрибуты, то логично добавлять нормальные data
C другой стороны, вообще не используете value, почему (риторический вопрос, не отвечайте)?

[Марат Агатов]

Ankhena, лол AjaxForm Форма учитывает этот параметер раз на то пошло