Цвет параграфа не изменяется через JS. Ошибка: Cannot set properties of undefined (setting 'color')

не могу понять почему не хочет изменяться цвет параграфов по клику. Есть 4 блока во флексбоксе. Хочу по клику на первый блок изменять цвет текста параграфов в нём. Но, либо выходит ошибка:

Uncaught TypeError: Cannot set properties of undefined (setting 'color') at HTMLDivElement.firstBlock.onclick

Когда код такой:

<div class="each_block first_block"><p>GitPod is incredibly cool.</p>
                    <p>In my opinion, this is a big step in open source software contribution. I'm excited to see where we go from here.</p>
                        <div class="signature">
                            <img src="img/Ben.png">
                                <p class="signature_p">
                                    <b>Ben Halpern</b>
                                        <br>
                                    Creator and Co-founder
                                        <br>
                                    <b>@forem</b> and <b>@ThePracticalDev</b>
                                </p>
                        </div>
                    </div>

JS код добавлен ниже блоков в HTML

<script language="JavaScript">
        // нахожу элемент по классу
            let firstBlock = document.querySelector('.first_block');
        // В классе назожу параграфы 'p'
            let paragraph = firstBlock.getElementsByTagName('p');

        // По клику мыши хочу изменить цвет текста по всех 'p' на красный

            firstBlock.onclick = function() {
                paragraph.style.color = 'red';
                // Вывод в консоль просто чтобы видеть действие 
                    console.log('Whats wrong?');
                }
        </script>   

Либо меняется цвет только первого параграфа когда меняю код на этот:

<script language="JavaScript">
        // нахожу элемент по классу
            let firstBlock = document.querySelector('.first_block');
        // В классе назожу параграфы 'p'
            let paragraph = document.querySelector('.first_block p');

        // По клику мыши хочу изменить цвет текста по всех 'p' на красный

            firstBlock.onclick = function() {
                paragraph.style.color = 'red';
                // Вывод в консоль просто чтобы видеть действие 
                    console.log('Whats wrong?');
                }
        </script>   

Вопрос в том как изменить цвет текста внутри всех тегов 'p' ?

Если я изменю строку кода на :

let paragraph = document.querySelectorAll('.first_block p');

Останется та же ошибка:

index2.html:256 Uncaught TypeError: Cannot set properties of undefined (setting 'color') at HTMLDivElement.firstBlock.onclick

И если так тоже:

let paragraph = document.querySelectorAll('p'); 

Хотя последняя запись изначально некорректная, т.к.мне нужно искать все 'p' в конкретном блоке. Но и при такой записи ошибка повторяется:

let paragraph = firstBlock.querySelectorAll('p');