document.querySelector("#fire_button_creator_button").addEventListener("click",function () {
document.querySelector("body").appendChild(document.createElement("button")).innerText="now click me,i am fire button";
})
document.querySelector("#fire_button_creator_button button").addEventListener("click",function () {
document.querySelector("p").innerText="i am fired";
})
<!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>Document</title>
</head>
<body>
<button id="fire_button_creator_button">fire button creator</button>
<p></p>
</body>
</html>
我想在運行時創建一個可以做某事的按鈕。就像在我的代碼中一樣,它在<p> </p>標簽“我被解雇”中注入了一些文本。但我越來越錯誤了。但為什么?。解決方案是什么(當然是在香草 JavaScript 中)?
uj5u.com熱心網友回復:
document.querySelector("#fire_button_creator_button").addEventListener("click",function () {
const button = document.createElement("button");
document.querySelector("body").appendChild(button).innerText="now click me,i am fire button";
button.addEventListener("click",function () {
document.querySelector("p").innerText="i am fired";
})
})
您必須在創建新按鈕元素后添加事件偵聽器。您可以像上面的代碼示例或其他方式那樣執行此操作。唯一重要的部分是在創建之后執行,因此實際的事件偵聽器附加到實際的 html 元素
uj5u.com熱心網友回復:
您可以立即將 eventListener 分配給 createdElement 而不是再次選擇它(這在您的情況下不起作用,因為該元素甚至還不存在)。
document.querySelector("#fire_button_creator_button").addEventListener("click",function(){
const button = document.createElement("button")
button.innerText="now click me, i am fire button"
button.addEventListener("click",function(){
document.querySelector("p").innerText="i am fired";
})
document.querySelector("body").appendChild(button)
})
<!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>Document</title>
</head>
<body>
<button id="fire_button_creator_button">fire button creator</button>
<p></p>
</body>
</html>
轉載請註明出處,本文鏈接:https://www.uj5u.com/caozuo/506190.html
標籤:javascript 事件处理
下一篇:嘗試更新時間時未定義“現在”
