Почему js рабтает только для первого поста?

Question

[Dmitriy]

На странице вывожу посты с помощью РНР, foreach циклом.
При нажатии на слово "Edit" у любого поста, скрипт выполняется только для первого.
При нажатии заголовок и основная часть скрываются и появляется форма, для редактирования поста.
Как исправить?

<?php
<?php
                    foreach($posts as $post){
                        if($post){
                ?>
                <div class="user_block">
                    <div class="post_head">
                        <div class="post_img">
                            <img src="http://localhost/blog/files/avatars/<?php echo $user['avatar']?>">
                        </div>
                        <a href="index.php?delete_post=<?php echo $post['id']?>" class="delete hint--bottom-right" data-hint="Delete!">&#10006;</a>

                        <span class="delete" id="edit_post" onclick="edit()">Edit!</span>

                        <div class="post_text">
                            <p class="posts_header"><?php echo $post['header']?></p>
                            <p class="post_date"><?php echo $post['date']?></p>
                        </div>
                        <p class="post_content"><?php echo $post['content']?></p>

                        <input type="text" class="default upd_header" name="upd_header" value="<?php echo $post['header']?>">
                        <textarea name="upd_content" class="upd_content txt_default"></textarea>
                    </div>





                    <div class="post_footer">
                        <div class="views hint--left" data-hint="<?php echo $post['views']?>">
                            <img src="https://img.icons8.com/ios/16/000000/visible.png"><span class="views_counter"><?php echo $post['views']?></span>
                        </div>
                        <div class="likes">
                            <span class="hint--top" data-hint="<?php echo $post['likes']?>"><img src="https://img.icons8.com/android/16/000000/plus.png"></span>
                            <span class="hint--top" data-hint="<?php echo $post['dislikes']?>"><img src="https://img.icons8.com/android/16/000000/minus.png"></span>
                        </div>
                        <div class="comments">
                            <img src="https://img.icons8.com/ios-glyphs/20/000000/comments.png">
                            <span class="views_counter"><?php echo $post['comments']?></span>
                        </div>
                    </div>
                </div>
                <?php }else{ ?>
                <div class="user_block">
                    <p class="posts_header">There is no posts!</p>
                </div>
                <?php } }?>

function edit(){
    let post_text = document.getElementsByClassName("post_text");
    let post_content = document.getElementsByClassName("post_content");
    let input = document.getElementsByClassName("upd_header");
    let textarea = document.getElementsByClassName("upd_content");


    if(post_text.style.display !== "none"){
        post_text.style.display = "none";
        post_content.style.display = "none";
        input.style.display = "inline-block";
        textarea.style.display = "inline-block";
    }else{
        post_text.style.display = "inline-block";
        post_content.style.display = "inline-block";
        input.style.display = "none";
        textarea.style.display = "none";
    }
}

Comments

[Froggyweb]

наверняка дело в js. которого нет в приведенном коде и неправильных тегах в вопросе.

[Dmitriy]

Froggyweb, js есть

[Froggyweb]

да, сорри

Answer 1

[Пашенька]

1. Нельзя в цикле выводить статические аттрибуты id. id должен быть уникален для станицы.
2. Отсюда и вытекает, что работает только для первого поста, так как в вашей функции так и написано: "выбрать элемент по айди", предполагается что айди на странице один. Выбирать нужно основываясь на посте, по которому кликнули.

<span class="delete" onclick="edit(this)">Edit!</span>

function edit(context){
    let parent = context.parentElement;
    let post_text = parent.querySelector('.post_text');
    let post_content = parent.querySelector('.post_content');
    // и т.д.
    ...
}

Comments

[Dmitriy]

получается у всех блоков один и тот же id, и обрщается к первому, как сделать чтобы к каждому отдельно?

[Sergey Bro]

dmitriyuvin, вместо id используй class, либо используй разные id

[Пашенька]

dmitriyuvin, убрать IDs вообще. Выбирать по классу.

[Dmitriy]

elem = getElementsByClassName возвращает массив значение, у меня это 3.
как мне получить elem[0] если я нажал на первый блок, elem[1] - на второй и т.д?

[Пашенька]

dmitriyuvin, обновил ответ

[Dmitriy]

like-a-boss, спасибо большое, как ты js учил?

[Пашенька]

dmitriyuvin, учил очень настойчиво, не читая ничего. Просто тыркал его днями напролёт, пытаясь разобраться и поставив цель сделать кое-какой проект. Постепенно настойчивость взяла своё и пришло некоторое понимание, потом почитал learn.javascript.ru и очень многое прояснилось. Лучше, конечно, изначально что-то почитать, иначе это долгий путь.
Читать и практиковать(придумав себе реальный проект), практиковать больше, чем читать. Вот, что я могу посоветовать с текущей позиции.

[Dmitriy]

like-a-boss, я хочу в backend, js чуть по-позже, но подход к изучению думаю похожие во всех направлениях.
От души:)

[Пашенька]

dmitriyuvin, я, честно, бы посоветовал идти в бэк и не оглядываться. Фронт-энд - это болото) А так, да, везде практика, практика и только так. Отметь решением, если помогло :)

[Dmitriy]

like-a-boss, еще и луцк влеплю)

[Пашенька]

dmitriyuvin, Успехов (:

[Dmitriy]

like-a-boss, Благодарю, взаимно