在循环外获取在按钮上执行的元素的ID,可以通过以下步骤实现:
以下是一个示例代码:
<!DOCTYPE html>
<html>
<head>
<title>获取按钮上执行元素的ID</title>
</head>
<body>
<button id="btn1">按钮1</button>
<button id="btn2">按钮2</button>
<button id="btn3">按钮3</button>
<script>
// 在循环外定义一个变量,用于存储按钮上执行的元素的ID
let clickedElementId = '';
// 给按钮添加点击事件的监听器
document.querySelectorAll('button').forEach(button => {
button.addEventListener('click', handleClick);
});
// 点击事件的回调函数
function handleClick(event) {
// 获取被点击的按钮
const clickedButton = event.target;
// 获取按钮上执行的元素的ID
clickedElementId = clickedButton.id;
// 在控制台输出按钮上执行的元素的ID
console.log(clickedElementId);
}
</script>
</body>
</html>
在上述示例中,通过给每个按钮添加点击事件的监听器,当点击按钮时,会触发回调函数handleClick
。在回调函数中,通过事件对象event
的target
属性获取到被点击的按钮对象clickedButton
,然后通过clickedButton.id
获取到按钮上执行的元素的ID,并将其赋值给clickedElementId
变量。你可以根据实际需求,将clickedElementId
变量用于后续的操作。
领取专属 10元无门槛券
手把手带您无忧上云