为什么我的按钮不能与 Ejs 和 Express 一起在 addEventListener 上工作？答案

【问题标题】：why doesnt my button work on addEventListener alongside Ejs and Express?为什么我的按钮不能与 Ejs 和 Express 一起在 addEventListener 上工作？
【发布时间】：2021-06-08 21:32:32
【问题描述】：

我尝试制作一个 Twitter 形状的地方，我可以在其中发布推文（帖子）并且帖子显示在同一页面上。此外，每个帖子都有一个默认为 display:none 的编辑。当我按下“编辑”按钮时，我需要将该显示更改为“阻止”，以便使其可见并使用该空间编辑我的评论。但是我的按钮不起作用！我想测试我的按钮，所以我为其事件放置了一个 console.log，但它不起作用。为什么？

如果您能帮助我解决我的问题并提出实现我最终目标的方法（制作 cmets 并在同一个地方编辑它们），那就太好了。 index.js（第一个代码）/ home.ejs(第二个代码)

    const express = require('express');
    const app = express();
    const path = require('path');`enter code here`
    const methodOverride = require('method-override');
    let allPosts = [];

    app.use(express.urlencoded({extended :true }));
    app.set('view engine','ejs');
    app.use(methodOverride('_method'));

    app.get('/',(req,res) => {
        res.render('home.ejs')
    })

    app.post('/post/new',(req,res) => {
        const {username,post} = req.body;
        allPosts.push({username,post});
        res.render('home.ejs',{allPosts});
    })


    app.listen(3000,() => {
        console.log('Server is listening on port 3000!')
    })

<!-- language: lang-html -->

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>homepage</title>
    </head>
    <body>
        <h1>Welcome to the Wall!</h1>
        <p>tell me whats on your mind today!</p>
        <form action="/post/new" method="POST">
            <input type="text" name='username' placeholder="username">
            <textarea name='post' placeholder="how do you feel today?"></textarea>
            <button>Submit</button>
        </form>

        <% for (p in locals.allPosts) { %>
            <% let post = locals.allPosts  %> 
            <p>
                <b><%= post[p].username %></b> : <%= post[p].post %> 
                <button class="edit">Edit</button><button>Delete</button>
            </p>
            <textarea id="edit" name="edit" style='display:none'></textarea>
        <% } %>
        <script>
            let edit = document.querySelector('.edit');
            edit.addEventListener('click',() => {
            console.log('you clicked on edit btn!');})

        </script>
        
    </body>
    </html>

【问题讨论】：

标签： javascript html node.js express ejs

【解决方案1】：

document.querySelector('#edit') 选择 ID 为 edit 的唯一元素。

具有该 ID 的元素是 textarea，而不是 button，它是在循环中生成的，因此它可能不是唯一的。

如果您想根据它所属的类来选择一个元素，请使用. 而不是#，并且不要在类名本身中加入特殊字符（如#）。

如果您想选择多个元素，请使用 querySelectorAll 并遍历它给出的多个结果。

【讨论】：

我用类名试过了，还是不行。
@mamalatishi — 您忽略了此答案的最后一段，因此您只选择了属于该类成员的第一个元素。

【解决方案2】：

尝试将按钮属性更改为id。如下所示。

 <button id="edit">Edit</button><button>Delete</button>

然后我是你的脚本

 let edit = document.querySelector('#edit');

【讨论】：