addeventlistener 相关问题

在键盘按钮项目中添加EventListener

我有一个关于键盘的迷你项目，我想知道如何在我的JavaScript代码中添加addEventListener，如果我按下自己的键盘中的一个键，在我的项目中显示该按钮并更改

在 Angular 中删除事件监听器后重新附加它

我有一个带有两个按钮的模态：一个位于标题中，一个位于模态主体中。目前，当模式打开时，焦点会自动转到模式主体中的按钮，但我希望它集中在...

未定义重试脚本元素的函数

我有一个可以运行的脚本，但我不确定它是否正确。这里至少按钮可以工作并且不会首先抛出错误。给出错误 附加事件侦听器时出错：ReferenceError：元素是...

未定义重设脚本元素的函数

我有一个可以运行的脚本，但我不确定它是否正确。这里至少按钮可以工作并且不会首先抛出错误。给出错误 附加事件侦听器时出错：ReferenceError：元素是...

index.js：107未捕获的类型错误：无法读取null的属性（读取'addEventListener'）

javascript 错误行 userComment.addEventListener("输入", () => { publishBtn.disabled = !userComment.value.trim(); }); 输入的位置是html javascript 错误行 userComment.addEventListener("input", () => { publishBtn.disabled = !userComment.value.trim(); }); 输入所在的html <div id="StartComment" class="commentcontainer"> <div class="head"> <br><br><br><h1>Post a Comment!</h1> <a href="#publish">Click here to scroll down...</a> </div> <div> <span id="Comment">0</span> Comments </div> <div class="text"> <p>I will be happy to hear from you!</p> </div> <div class="comments"></div> <div class="commentbox"> <img src="commenterpng.png" alt="Commenter" id="CommenterStyle"> <div class="content"> <h2>Comment as:</h2> <input type="text" value="Anonymouse" class="user"> <div class="commentinput"> <input id="input" type="text" placeholder="Enter your comment..." class="usercomment"> <div class="buttons"> <button type="submit" id="publish" disabled>Publish</button> </div> </div> <p class="policy">This site is protected by reCAPTCHA and the Google <a href="#">Privacy Policy</a> and <a href="#">Terms of Service</a> apply. </p> </div> </div> </div> 我尝试创建一个评论部分，如果你没有在评论输入框中输入任何内容，它将被禁用，如果你在其中输入任何内容，那么它会变成启用（启用）并带有CSS的蓝色 正如您在评论中提到的， .getElementById() 查找具有 id 属性的元素。因此，.getElementById('userComment') 将不会返回任何内容 (null)，因为您没有在提供的 HTML 中使用该 ID。这给你两个选择： 将 ID 添加到您想要的元素 使用另一个选择器 正如您在评论中猜测的那样，是的，.getElementsByClass('usercomment')[0]可以工作，但请记住，首先获取该类的所有元素的列表，然后返回第一个元素 - 如果您将 class="usercomment" 添加到另一个元素，排序将很重要页面上的元素。

双输入不起作用 AddEventListener for keydown Enter key

freecodecamp 的一个项目，将其创建为电话亭以使其变得有趣。 目前卡住了，困惑了好几天，为什么当我再次按下回车键（应该清除输入）时，if

如何将“Enter”键事件侦听器添加到我使用 querySelector 抓取的输入栏？

基本上，我正在遵循这个练习 https://www.youtube.com/watch?v=EerdGm-ehJQ&t=50183s 14n，第 2 部分。 我的页面如下所示：我正在关注其中包含“3”的输入栏 当我按“

如何在javascript中验证密码后移动到另一个html页面？

有两个html页面，index.html和bankPage.html，我试图在index.html上使用密码验证用户，然后如果密码正确，他就会移动到bankPage.html页面。 与...

无法使用 eCharts 响应功能

我的表格中有三个购物车，如果窗口大小发生变化，我希望自动调整大小，可以通过切换到不同尺寸的显示器或更改显示器上的浏览器大小。 根据...

我需要添加事件侦听器方面的帮助

我有一个 Django 模板，我真的想使用 JavaScript。我尝试在线阅读寻求帮助，但我仍然不明白。 我想在下面的代码中添加一个 addEventListener() 方法： <...

无法在DOM中添加正确的可编辑li元素

我正在尝试创建类似待办事项列表的东西。应用程序的结构很简单 - 我有一个用于存储任务数据的状态和 useEffect，它在每个任务上添加事件监听器。任务可能是...

Js：删除或禁用之前添加的某个事件的事件监听器

代码笔 采取以下示例（与codepen相同） const div = document.querySelector('div'); 函数 a(){ console.log('a'); } 函数 b(){ 控制台.log('b'); } div.addEventListener('点击...

如何迭代节点列表以便为每个元素节点分配特定于索引的事件处理程序？

我正在尝试使用 for 循环来递增多个按钮元素，以便我可以为它们分配不同的操作。 我无法弄清楚这一点，这是代码。 我对 javascript 非常陌生......

我正在尝试使用 for 循环来递增多个按钮元素，以便我可以为它们分配不同的操作

我无法弄清楚，这是代码， 我对 javascript 非常陌生，我已经阅读了 MDN 文档，但没有提出任何建议。 让 numberOfbuttons = document.querySelectorAll(".

addEventListner 不是第一次调用

const handleCharacterChange = (值,事件) => { const plainText = value.replace(/<\/?[^>]+(>|$)/g, ''); if (纯文本？.length <= 250) { console.log(plainText,&q...

JavaScript 如何记录用户输入的值？

给出的问题是： 当用户单击ID为generate-message的按钮时，记录用户在输入字段中输入的值。 这是提供的 HTML： 给出的问题是： 当用户单击ID为generate-message的按钮时，记录用户在输入字段中输入的值。 这里是提供的 HTML： <input type="text" id="message"> <button id="generate-message">Express Yourself!</button> 我尝试过多种方法，我最近的尝试是： const button = document.getElementId("generate-message") button.addEventListener("click", function(){ }) 欢迎来到 StackOverflow！ 您的第一次尝试是一个好的开始！ 首先，通过 ID 获取元素的函数是 getElementById，而不是 getElementId。使用错误的函数名称可能会出现错误。 设置按钮的事件侦听器后，您可以将任何代码放入其中。在此示例中，它将值记录到控制台，并发出警报，告诉用户他们输入了什么值： const button = document.getElementById("generate-message") const input = document.getElementById("message") button.addEventListener("click", function(){ const val = input.value; console.log(val); alert("Your value is: " + val) }) <input type="text" id="message"> <button id="generate-message">Express Yourself!</button>

useEffect 中的 addEventListener 添加的单击事件在安装组件时被触发

我有两个组件，父组件（应用程序）显示一个按钮，单击该按钮有条件地呈现子组件。 这里是沙箱。 应用程序.js 从“反应”导入{useState}； 导入

点击事件不适用于动态添加的元素

//从“../html/products.js”导入{products}； const 产品 = getTestData(); 让 productsHTML=""; 产品.forEach(x => { 产品HTML+=` // import {products} from"../html/products.js"; const products = getTestData(); let productsHTML=""; products.forEach(x => { productsHTML+=`<div class="products"> <div class="image"> <img class="img"src="${x.image}" alt=""> </div> <div class="content"> <div class="productName">${x.name}</div> <div class="productPrice">Rs.${x.price}</div> <select name="number" id="productQuantity" class="select"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> <option value="10">10</option> </select> <button class="addtocart" >Add To Cart</button> </div> </div> ` }); document.querySelector(".totalHTML").innerHTML=productsHTML; // problem is here: const btn=document.querySelector(".addtocart"); console.log(btn); btn.addEventListener("click",function(){ console.log("hello"); }); // for demo only function getTestData() { return [{"id":1,"price":9.99,"name":"Essence Mascara Lash Princess","image":"https://cdn.dummyjson.com/products/images/beauty/Essence%20Mascara%20Lash%20Princess/thumbnail.png"},{"id":2,"price":19.99,"name":"Eyeshadow Palette with Mirror","image":"https://cdn.dummyjson.com/products/images/beauty/Eyeshadow%20Palette%20with%20Mirror/thumbnail.png"},{"id":3,"price":14.99,"name":"Powder Canister","image":"https://cdn.dummyjson.com/products/images/beauty/Powder%20Canister/thumbnail.png"},{"id":4,"price":12.99,"name":"Red Lipstick","image":"https://cdn.dummyjson.com/products/images/beauty/Red%20Lipstick/thumbnail.png"},{"id":5,"price":8.99,"name":"Red Nail Polish","image":"https://cdn.dummyjson.com/products/images/beauty/Red%20Nail%20Polish/thumbnail.png"},{"id":6,"price":49.99,"name":"Calvin Klein CK One","image":"https://cdn.dummyjson.com/products/images/fragrances/Calvin%20Klein%20CK%20One/thumbnail.png"},{"id":7,"price":129.99,"name":"Chanel Coco Noir Eau De","image":"https://cdn.dummyjson.com/products/images/fragrances/Chanel%20Coco%20Noir%20Eau%20De/thumbnail.png"},{"id":8,"price":89.99,"name":"Dior J'adore","image":"https://cdn.dummyjson.com/products/images/fragrances/Dior%20J'adore/thumbnail.png"},{"id":9,"price":69.99,"name":"Dolce Shine Eau de","image":"https://cdn.dummyjson.com/products/images/fragrances/Dolce%20Shine%20Eau%20de/thumbnail.png"},{"id":10,"price":79.99,"name":"Gucci Bloom Eau de","image":"https://cdn.dummyjson.com/products/images/fragrances/Gucci%20Bloom%20Eau%20de/thumbnail.png"},{"id":11,"price":1899.99,"name":"Annibale Colombo Bed","image":"https://cdn.dummyjson.com/products/images/furniture/Annibale%20Colombo%20Bed/thumbnail.png"},{"id":12,"price":2499.99,"name":"Annibale Colombo Sofa","image":"https://cdn.dummyjson.com/products/images/furniture/Annibale%20Colombo%20Sofa/thumbnail.png"},{"id":13,"price":299.99,"name":"Bedside Table African Cherry","image":"https://cdn.dummyjson.com/products/images/furniture/Bedside%20Table%20African%20Cherry/thumbnail.png"},{"id":14,"price":499.99,"name":"Knoll Saarinen Executive Conference Chair","image":"https://cdn.dummyjson.com/products/images/furniture/Knoll%20Saarinen%20Executive%20Conference%20Chair/thumbnail.png"},{"id":15,"price":799.99,"name":"Wooden Bathroom Sink With Mirror","image":"https://cdn.dummyjson.com/products/images/furniture/Wooden%20Bathroom%20Sink%20With%20Mirror/thumbnail.png"},{"id":16,"price":1.99,"name":"Apple","image":"https://cdn.dummyjson.com/products/images/groceries/Apple/thumbnail.png"},{"id":17,"price":12.99,"name":"Beef Steak","image":"https://cdn.dummyjson.com/products/images/groceries/Beef%20Steak/thumbnail.png"},{"id":18,"price":8.99,"name":"Cat Food","image":"https://cdn.dummyjson.com/products/images/groceries/Cat%20Food/thumbnail.png"},{"id":19,"price":9.99,"name":"Chicken Meat","image":"https://cdn.dummyjson.com/products/images/groceries/Chicken%20Meat/thumbnail.png"},{"id":20,"price":4.99,"name":"Cooking Oil","image":"https://cdn.dummyjson.com/products/images/groceries/Cooking%20Oil/thumbnail.png"}]; } .products { margin: 0.5rem; border-bottom: thin solid black; min-height: 100px; } .image { display: inline; float: left; clear: both; } .image img { height: 100px; width: auto; } <div class="totalHTML"></div> #控制台中没有“hello” 这是我的电子商务项目。 按钮 addEventListener.console.log("hello") 的 onclick 未显示。 我也尝试过使用高级功能。 我正在尝试检查我的点击是否有效，以便进一步使用 onclick 来获取购物车数量的 html 的数量（输入）。 并使用该数字来增加购物车数量，并使用 onclick 来计算价格。 所以请帮助我并使 addeventlistener 可行。 btn.addEventListener("点击",()=>{ }); 看起来您正在尝试向脚本运行时可能不存在于 DOM 中的按钮添加事件侦听器。由于您是在循环内动态生成按钮，因此您需要将事件侦听器单独附加到每个按钮。尝试像这样修改你的代码： products.forEach(x => { productsHTML += ` <div class="products"> <div class="image"> <img class="img" src="${x.image}" alt=""> </div> <div class="content"> <div class="productName">${x.name}</div> <div class="productPrice">Rs.${x.price}</div> <select name="number" id="productQuantity" class="select"> <option value="1">1</option> <option value="2">2</option> ... <option value="10">10</option> </select> <button class="addtocart">Add To Cart</button> </div> </div> `; }); // Update the HTML document.querySelector(".totalHTML").innerHTML = productsHTML; // Select all "Add To Cart" buttons const buttons = document.querySelectorAll(".addtocart"); // Add event listeners to each button buttons.forEach((btn, index) => { btn.addEventListener("click", () => { console.log("hello"); const quantity = document.querySelectorAll(".select")[index].value; console.log(`Quantity: ${quantity}`); // Further logic to handle the cart can be added here }); });

按钮 btn.addEventListener.console.log("hello") 的 onclick 未显示。我也尝试过使用高级功能

从“../html/products.js”导入{products}； 让 productsHTML=""; 产品.forEach(x => { 产品HTML+=` ... import {products} from"../html/products.js"; let productsHTML=""; products.forEach(x => { productsHTML+=`<div class="products"> <div class="image"> <img class="img"src="${x.image}" alt=""> </div> <div class="content"> <div class="productName">${x.name}</div> <div class="productPrice">Rs.${x.price}</div> <select name="number" id="productQuantity" class="select"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> <option value="10">10</option> </select> <button class="addtocart" >Add To Cart</button> </div> </div> ` }); document.querySelector(".totalHTML").innerHTML=productsHTML; //problem is here:// const btn=document.querySelector(".addtocart"); console.log(btn); btn.addEventListener("click",function(){ console.log("hello"); }); #控制台中没有“hello” 这是我的电子商务项目。 在此输入图片描述 按钮 addEventListener.console.log("hello") 的 onclick 未显示。 我也尝试过使用高级功能。 我正在尝试检查我的点击是否有效，以便进一步使用 onclick 来获取购物车数量的 html 的数量（输入）。 并使用该数字来增加购物车数量，并使用 onclick 来计算价格。 所以请帮助我并使 addeventlistener 可行。 btn.addEventListener("点击",()=>{ }); 看起来您正在尝试向脚本运行时可能不存在于 DOM 中的按钮添加事件侦听器。由于您是在循环内动态生成按钮，因此您需要将事件侦听器单独附加到每个按钮。尝试像这样修改你的代码： products.forEach(x => { productsHTML += ` <div class="products"> <div class="image"> <img class="img" src="${x.image}" alt=""> </div> <div class="content"> <div class="productName">${x.name}</div> <div class="productPrice">Rs.${x.price}</div> <select name="number" id="productQuantity" class="select"> <option value="1">1</option> <option value="2">2</option> ... <option value="10">10</option> </select> <button class="addtocart">Add To Cart</button> </div> </div> `; }); // Update the HTML document.querySelector(".totalHTML").innerHTML = productsHTML; // Select all "Add To Cart" buttons const buttons = document.querySelectorAll(".addtocart"); // Add event listeners to each button buttons.forEach((btn, index) => { btn.addEventListener("click", () => { console.log("hello"); const quantity = document.querySelectorAll(".select")[index].value; console.log(`Quantity: ${quantity}`); // Further logic to handle the cart can be added here }); });

无法在React中使用'popstate'事件监听器在UseEffect中设置状态

我在React中有一个useEffect。在这个 useEffect 中，我有一个 popstate eventListener。如果我访问该页面，然后访问另一个页面，然后按返回键返回...