Сделать код элегантнее

Question

Нахожусь на начальном уровне. Написал 2 функции уровня школьника :)

function sizeValue() {
    let width = document.getElementById("width").value;
    let height = document.getElementById("height").value;
    document.getElementsByClassName("random__result")[0].style.width = width + "px";
    document.getElementsByClassName("random__result")[0].style.height = height + "px";
}

function randomColor() {
    let Red = Math.ceil(Math.random()*256-1);
    let Green = Math.ceil(Math.random()*256-1);
    let Blue = Math.ceil(Math.random()*256-1);
    document.getElementsByClassName("random__result")[0].style.background = "rgb(" + Red + "," + Green + "," + Blue + ")";
}

Думаю тут и так всё предельно ясно, но вкратце опишу функционал. Первая функция по oninput меняет размер div, а вторая раскрашивает его в случайный цвет по клику кнопки. :)

Вопрос: Можно ли сделать код более элегантным? Нужно ли в тут использовать ООП?

Answer 1

минимум можно использовать js 21 века :)

function sizeValue() {
    const width  = document.querySelector("#width").value;
    const height = document.querySelector("#height").value;
    document.querySelectorAll(".random__result")[0].style.width  = `${width}px`;
    document.querySelectorAll(".random__result")[0].style.height = `${height}px`;
}

function randomColor() {
    const Red   = Math.floor(Math.random() * 256);
    const Green = Math.floor(Math.random() * 256);
    const Blue  = Math.floor(Math.random() * 256);
    document.querySelectorAll(".random__result")[0].style.background = `rgb(${Red}, ${Green}, ${Blue})`;
}

БЛОГ НА HUSL

Сделать код элегантнее

Ответы (1 шт):