Как мне выбрать все кнопки и приспособить к ним действие?

Question

[green300]

точнее помогите правильно форыч здесь составить..чет не выходит.

window.addEventListener('DOMContentLoaded', function(){
        var viewAnswer = document.querySelectorAll('.viewAnswer'),
            answer_comment = document.querySelectorAll('.answer-comment'),
            close = document.querySelectorAll('.closeAnswer');
            
            viewAnswer.addEventListener('click', function(){
                answer_comment.style.display = 'block';
                viewAnswer.style.display = 'none';
                close.style.display = 'block';
            })
            close.addEventListener('click', function(){
                answer_comment.style.display = 'none';
                viewAnswer.style.display = 'block';
                close.style.display = 'none';
            })

      })

Answer 1

[Sylvester_Stallone]

for (let i = 0; i < answer_comment.length; i++) {

    viewAnswer[i].addEventListener.addEventListener('click', function(){
        answer_comment[i].style.display = 'block';
        this.style.display = 'none';
        close[i].style.display = 'block';
    })
    
}

ДЛЯ close тоже самое
+ через var уже никто не пишет, используй let или const, почитай про них , чем отличаются и для чего какая нужна

Comments

[green300]

спасибо поробую разобраться..про лет и вар читал - последний имеет глобальную область видимости вот я и решил его применить

[alekssamos]

answer_comment.forEach((t, i) => {
    t.addEventListener('click', function(){
        t.style.display = 'block';
        this.style.display = 'none';
        close[i].style.display = 'block';
    })
});

[green300]

alekssamos, форыч в js непривычный..t это переменная answer_comment?

[alekssamos]

green300, let t = answer_comment[i];

[green300]

alekssamos, понял спс

Answer 2

[Сергей delphinpro]

Хорошо бы разметку видеть.
Допустим она такая

<div class="answer-block">
    <button class="viewAnswer"> </button>
    <button class="closeAnswer"></button>
    <div class="answer-comment"> .... </div>
</div>

Тогда код может быть такой

const answers = document.querySelectorAll('.answer-block');
answers.forEach(answer => {
    const open = answer.querySelector('.viewAnswer'),
    const close = answer.querySelector('.closeAnswer');
    const comment = answer.querySelector('.answer-comment'),

    open.addEventListener('click', function(){
        comment.style.display = 'block';
        open.style.display = 'none';
        close.style.display = 'block';
    });

    close.addEventListener('click', function(){
        comment.style.display = 'none';
        open.style.display = 'block';
        close.style.display = 'none';
    });
});

Comments

[green300]

такая разметка в принципе обычная...но у меня возникла другая проблема - я сделал функцию показа и скрытя ответов на комментарий через тег 'a'. и теперь при нажатии страница прокручивется моментально наверх, вот как сделать чтоб ссылка работала как кнопка в саму ссылку решетку поставил чтоб страница не перезагружалась, но вот чтоб не перескакивала наверх чет где то видел как делать вроде но не помню...неохото переписывать на кнопки все новые стили писать

[Сергей delphinpro]

green300, напишите вместо решетки
<a href="javascript:;">

[green300]

Сергей delphinpro, ага работает, спасибо!