Как сократить скрипт, если возможно?

Question

[artem]

function resize() {
	let l1 = document.querySelector('#l1').value;
	let l2 = document.querySelector('#l2').value;
	let l3 = document.querySelector('#l3').value;
	let l4 = document.querySelector('#l4').value;
	
	document.querySelector('#lt1').value = l1;
	document.querySelector('#lt2').value = l2;
	document.querySelector('#lt3').value = l3;
	document.querySelector('#lt4').value = l4;

	document.querySelector('.block').style.borderRadius = l1+'px '+l2+'px '+l3+'px '+l4+'px ';
}

Answer 1

[0xD34F]

Заменить id на классы:

const values = Array.from(document.querySelectorAll('.l'), n => n.value);
document.querySelectorAll('.lt').forEach((n, i) => n.value = values[i]);
document.querySelector('.block').style.borderRadius = values.map(n => `${n}px`).join(' ');

Answer 2

[Дмитрий Беляев]

function resize() {
  document.querySelector('.block').style.borderRadius = Array.from({length: 4}, (_, i) => {
    const n = i + 1;
    return (document.getElementById('lt' + n).value = document.getElementById('l' + n).value);
  }).join('px ') + 'px';
}

Comments

[artem]

Спасибо, но 80% кода мне не понятны)

[Дмитрий Беляев]

artem, что конкретно Вам не понятно, давайте разберем

[artem]

Дмитрий Беляев, Array.from({length: 4}, (_, i) вот это и join('px ') + 'px'

[Дмитрий Беляев]

artem, Array.from создает массив из итератора или массивоподобного объекта
Объект {length: 4} как раз и имитирует массив с длиной 4
Так же у Array.from есть второй необязательный аргумент - функция, которая преобразовывает все элементы, которая работает аналогично функции отдаваемой в метод map у массива
Назвав аргумент подчеркиванием, я показал, что я его не использую (там все равно на всех шагах будет undefined), но мне нужен следующий аргумент - индекс
https://developer.mozilla.org/ru/docs/Web/JavaScri...

join - метод массива, объединяющий массив в 1 строку, соединяя все элементы через переданную в него строку.
https://developer.mozilla.org/ru/docs/Web/JavaScri...

ну а с помощью + 'px' я просто дописал css значение до правильного, так как join вставит переданную строку только между элементами, но не после

[artem]

Дмитрий Беляев, благодарю за пояснение, я пересмотрю код ещё несколько раз, надеюсь все пойму. Как круточто есть такие классные программисты, которые могут все разъяснить, а не говорить что програмиррвание не для меня и прочую чепуху.

Answer 3

[twobomb]

document.querySelector('.block').style.borderRadius = [1,2,3,4].map(e=>document.querySelector(`#l${e}`).value+"px").join(" ");