js访问节点元素，然后进行事件监听的问题？-灵析社区
ZZZ葡萄皮做简历过程中，需要用js控制进度条 1.首先我是用类名引入的是，Html代码和js代码：   然后去点击进度条是不会弹出prompt提示输入修改值的 2.然后我用id引入   然后在进度条框可以弹出输入修改的文本框  想知道怎么解决这个问题
WhatUpDanger方案一：
最直观的写法是：
Java
C++
C#
function updateProgress(progressElement) {
// 弹出输入框，让用户输入新的进度值
var newValue = prompt(
"Enter new progress value (0-100):",
progressElement.value
);
// 确保输入值在合法范围内（0-100）
newValue = parseInt(newValue, 10);
if (!isNaN(newValue) && newValue >= 0 && newValue
"改变progress.gif" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20241122/4afa266053da2d812bd270b15e13cdaa.png)
方案二：
可以将点击事件委托到ul标签同一处理
Java
C++
C#
// 添加事件委托
document
.getElementById("progressList")
.addEventListener("click", function (event) {
// 判断点击的元素是否是 progress 元素
if (event.target.tagName === "PROGRESS") {
// 弹出输入框，让用户输入新的进度值
var newValue = prompt(
"Enter new progress value (0-100):",
event.target.value
);
// 确保输入值在合法范围内（0-100）
newValue = parseInt(newValue, 10);
if (!isNaN(newValue) && newValue >= 0 && newValue
实现效果不变
方案三：
可以通过数据驱动的方式，渲染列表，避免增加一项就要写一堆html
// 数据数组
var data = [
{ language: "Java", progress: 40 },
{ language: "C++", progress: 40 },
{ language: "C#", progress: 40 }
];
// 获取 ul 元素
var ulElement = document.getElementById("progressList");
// 遍历数据数组，创建并添加列表项和进度条
data.forEach(function (item) {
var liElement = document.createElement("li");
var spanElement = document.createElement("span");
spanElement.textContent = item.language;
var progressElement = document.createElement("progress");
progressElement.max = 100;
progressElement.value = item.progress;
// 添加点击事件监听器
progressElement.addEventListener("click", function (event) {
var newValue = prompt(
"Enter new progress value (0-100):",
event.target.value
);
newValue = parseInt(newValue, 10);
if (!isNaN(newValue) && newValue >= 0 && newValue