Как в JS при нажатии на кнопку дать разные random цвета всем DIV?

Question

let divs = document.querySelectorAll('.row div')
divs.addEventListener('click',full)
function full(){
     this.innerHTML= Math.random()
 }
let elm = document.querySelector('.row div')
let x = parseInt(Math.random()*256)
let y = parseInt(Math.random()*256)
let z = parseInt(Math.random()*256)
let color = `rgb(${x},${y},${z})`
elm.style.color = color

нужно дать разные случайные цвета всем DIV а по клику другой кнопки всем DIV дать одно общее случайное число

.row{
             display: inline-flex;
             margin-left: 12%
         }
         .row div{
             height: 150px;
             width: 150px;
             margin: 10px;
             background-color: burlywood;
             text-align: center
                 
         }
         .btns{
             text-align: center
         }

 <div class="btns">
   <button class="btn btn-primary" id="part">partial randomize</button>
   <button class="btn btn-primary" id="full">full randomize</button>
   </div>
    <div class="row">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
    <div class="row">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
    <div class="row">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
    <div class="row">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
    <div class="row">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>

Answer 1

Как я понял нужны цвета не текста, а самого div. Если именно текста, то поменять background на color.
Исправил ошибки и оставил возможность менять число при клике на div
При нажатии на кнопку full randomize задаются случайные числа во все div.

    let divs = document.querySelectorAll('.row div');
    divs.forEach(function (c) { // Исправил Вашу функцию, но оставил возможность при нажатии на кноку выдавать новое рандомное значение числа.
        c.addEventListener('click',full);
    });
    function full(){
        this.innerHTML= Math.random()
    }
    let elm = document.querySelectorAll('.row div');
    for (let i=0;i<elm.length;i++){
        let x = parseInt(Math.random()*256);
        let y = parseInt(Math.random()*256);
        let z = parseInt(Math.random()*256);
        let color = "rgb("+x+","+y+","+z+")";
        elm[i].style.background = color;
    }
    fullR.onclick = function () {
        divs.forEach(function (c) {
            c.innerHTML= Math.random();
        });
    }

    .row{
        display: inline-flex;
        margin-left: 12%
    }
    .row div{
        height: 150px;
        width: 150px;
        margin: 10px;
        background-color: burlywood;
        text-align: center

    }
    .btns{
        text-align: center
    }

<div class="btns">
    <button class="btn btn-primary" id="part">partial randomize</button>
    <button class="btn btn-primary" id="fullR">full randomize</button>
</div>
<div class="row">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>
<div class="row">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>
<div class="row">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>
<div class="row">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>
<div class="row">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

Ответ на дополнительный вопрос. (Прибавление 1, при повторном нажатии на div)

    let divs = document.querySelectorAll('.row div');
    divs.forEach(function (c) { // Исправил Вашу функцию, но оставил возможность при нажатии на кноку выдавать новое рандомное значение числа.
        c.addEventListener('click',full);
    });
    function full(){
        if (this.innerHTML != ""){
            this.innerHTML = +this.innerHTML + 1;
        } else {
            this.innerHTML = Math.random()
        }
    }
    let elm = document.querySelectorAll('.row div');
    for (let i=0;i<elm.length;i++){
        let x = parseInt(Math.random()*256);
        let y = parseInt(Math.random()*256);
        let z = parseInt(Math.random()*256);
        let color = "rgb("+x+","+y+","+z+")";
        elm[i].style.background = color;
    }
    fullR.onclick = function () {
        divs.forEach(function (c) {
            c.innerHTML= Math.random();
        });
    }

    .row{
        display: inline-flex;
        margin-left: 12%
    }
    .row div{
        height: 150px;
        width: 150px;
        margin: 10px;
        background-color: burlywood;
        text-align: center

    }
    .btns{
        text-align: center
    }

<div class="btns">
    <button class="btn btn-primary" id="part">partial randomize</button>
    <button class="btn btn-primary" id="fullR">full randomize</button>
</div>
<div class="row">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>
<div class="row">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>
<div class="row">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>
<div class="row">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>
<div class="row">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

БЛОГ НА HUSL

Как в JS при нажатии на кнопку дать разные random цвета всем DIV?

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