如何在eventListener中传递参数？从onclick迁移的实现方案

首先你当前的代码存在一个关键问题：循环生成的按钮都使用了重复的id（EditButton、DeleteButton），但HTML中id必须唯一，getElementById只会选中第一个匹配的元素。下面是修正后的完整方案：

第一步：修改HTML/PHP代码 #

把按钮的id替换为唯一的class，同时用data-*属性存储需要传递的参数：

<tbody>
<?php
$query = mysqli_query($conn, "SELECT id, nombre, signo_solar FROM horoscopos") or die (mysqli_error($conn));
                        
if (mysqli_num_rows($query)==0){
echo "<td colspan='3'>No hay horóscopos que mostrar. Prueba a añadir uno en 'Crear entrada' del menú superior.</td>";
}else{
while ($row = mysqli_fetch_array($query)) { // Mientras haya elementos en el array
    echo "<tr>";
    echo "<td>$row[nombre]</td>";
    echo "<td>$row[signo_solar]</td>";

    echo "<td>
          <button class='btn btn-danger edit-btn' data-id='$row[id]'>Editar</button>
          <button class='btn btn-danger delete-btn' data-id='$row[id]' data-nombre='$row[nombre]' data-signo='$row[signo_solar]'>Eliminar</button>
          </td>";
    echo "</tr>";
}
}
?>
</tbody>

第二步：修改JavaScript代码 #

通过querySelectorAll获取所有对应class的按钮，遍历添加点击事件监听，在回调函数中读取按钮的dataset属性拿到参数，再传给原有函数：

function editEntry(id){
    // 你的原有逻辑代码
}
function deleteEntry(id, nombre, signo){
    // 你的原有逻辑代码
}

document.addEventListener('DOMContentLoaded', (event) => {
    // 绑定所有编辑按钮的点击事件
    document.querySelectorAll('.edit-btn').forEach(btn => {
        btn.addEventListener('click', () => {
            const id = btn.dataset.id;
            editEntry(id);
        });
    });

    // 绑定所有删除按钮的点击事件
    document.querySelectorAll('.delete-btn').forEach(btn => {
        btn.addEventListener('click', () => {
            const id = btn.dataset.id;
            const nombre = btn.dataset.nombre;
            const signo = btn.dataset.signo;
            deleteEntry(id, nombre, signo);
        });
    });
})

可选简化写法：利用事件对象读取参数 #

也可以直接通过事件对象的target属性获取触发按钮，再读取参数：

document.addEventListener('DOMContentLoaded', (event) => {
    document.querySelectorAll('.edit-btn').forEach(btn => {
        btn.addEventListener('click', (e) => {
            editEntry(e.target.dataset.id);
        });
    });

    document.querySelectorAll('.delete-btn').forEach(btn => {
        btn.addEventListener('click', (e) => {
            const target = e.target;
            deleteEntry(target.dataset.id, target.dataset.nombre, target.dataset.signo);
        });
    });
})

这样既完成了onclick到addEventListener的替换，又完整保留了参数传递功能，同时解决了重复id导致的绑定失效问题。

内容的提问来源于stack exchange，提问作者user22741203