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

Question

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

如果您能帮助我解决我的问题并提出实现我最终目标的方法（发表评论并在同一个地方进行编辑），那就太好了。 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>

Answer 1

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

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

如果你想 select 一个元素基于它所属的类，使用. 不是#并且不要在类名本身中放置特殊字符（如# ）。

如果要 select 多个元素，请使用querySelectorAll并循环它给出的多个结果。

Answer 2

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

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

然后我是你的脚本

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

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

问题描述

2 个解决方案

解决方案1
0 2021-06-08 21:39:29

解决方案2
0 2021-06-09 07:32:31

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

问题描述

2 个解决方案

解决方案1 0 2021-06-08 21:39:29

解决方案2 0 2021-06-09 07:32:31

解决方案1
0 2021-06-08 21:39:29

解决方案2
0 2021-06-09 07:32:31