addeventlistener 相关问题

如何在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。如果我访问该页面，然后访问另一个页面，然后按返回键返回...

为什么在我点击打开聊天之前聊天窗口就打开了？

所以，一开始我没有任何问题。 看起来效果很好。 我加载脚本，它只提供了“打开聊天”选项。 现在，它加载已经打开的整个聊天窗口，但不加载内容......

如何在 JavaScript 中防止双击时选择文本？

我正在使用 JavaScript 中的双击事件侦听器，以在用户双击某些文本元素时触发操作。但是，我还有另一个响应文本的事件监听器

Javascript addEventListener“点击”问题。单击仅有效一次

我希望每次单击img时图像都会改变。但更改img的点击仅有效一次。我做错了什么？ 随机图像选择器来自此网站：https://picsum.photos/ 和...

如何将 DOMContentloaded 事件监听器添加到 nextJS 中的文档中？

我正在尝试将 html 代码片段添加到我的 nextjs 项目中。该代码片段包含具有 createButton 函数的外部脚本。 我正在尝试将 html 代码片段添加到我的 nextjs 项目中。该代码片段包含具有 createButton 函数的外部脚本。 <div id="examplebtn"></div> <script type="text/javascript"> //<![CDATA[ document.addEventListener('DOMContentLoaded', function () { createButton('Name', 'Phone'); }); //]]> </script> <script src="https://example.com.na/js/example.js"></script> createButton 函数呈现一个由 id 标识的按钮（在本例中为 examplebtn），并且在本机 html 文档中它工作正常。但是，在 nextjs 中，我无法将事件侦听器添加到 DOMContentLoaded 事件（如脚本中所示），以便在加载 DOM 后运行该函数。我尝试过使用 Next/Script、useEffect 挂钩、原生 html 标签，但均无济于事。如何在文档完全加载之前将 DOMContentLoaded 事件侦听器添加到 jsx 组件，以便该函数可以在适当的时间运行？预先感谢您的热情帮助。 {编辑} 为了更清楚起见，我添加了 createButton 的最终代码。由于合同义务我无法发布代码，因此对其进行了编辑，但它应该会有所帮助。 window .ButtonComponent({ params, onPay: function (v, vn, a, r, e) { c = customFunct(moreParams); PopupComponent({ params, onCancel: function () { console.log('called onCancel'); // stuff here }, onSubmit: function (r) { // stuff here }, }).render('body'); }, }) .render('#examplebtn'); 您可以参考GitHub问题 这很棘手，因为这个事件触发得很早...... 你可以这样做： <script dangerouslySetInnerHTML={{ __html: ` window.addEventListener('DOMContentLoaded', () => { console.log('DOM fully loaded and parsed'); }); `, }} ></script> 当需要在初始加载时向我们的一些页面添加弹出窗口时，我遇到了非常类似的情况。这个弹出窗口需要注入 html，我还需要对其进行样式和格式化。我可以通过将代码放入公共文件夹内的脚本中并通过 next/script 中的脚本组件调用它来实现此目的。 <Script type="text/javascript" src="/popup/hubspot.js" /> <Script type="text/javascript" src="/popup/popupLogic.js" /> <div id="examplebtn"></div> { document.addEventListener('DOMContentLoaded', function () { createButton('Name', 'Phone'); }); } 只需使用块并编写您想要的任何脚本

React Native - TypeError：window.addEventListener 不是函数（未定义），js 引擎：hermes

我有一个世博会项目，正在设置一个文员授权。我已遵循职员提供的所有必需代码，现在在链接上收到此错误。对我来说一切看起来都很好，但我不明白...

如何正确使用事件委托，而不是为同一事件类型添加并发的第二个事件侦听器？

我正在使用 document.addEventListener("DOMContentLoaded", function () 强制输入模式（首先必须是字母，然后防止连续空格等） 现在我想做第二个

如何为同一事件类型添加第二个事件侦听器或如何正确使用事件委托？

我正在使用 document.addEventListener("DOMContentLoaded", function () 强制输入模式（首先必须是字母，然后防止连续空格等） 现在我想做第二个