function 相关问题

函数（也称为过程，方法，子例程或例程）是用于执行单个特定任务的代码的一部分。将此标记用于特别涉及创建或调用函数的问题。有关实现执行任务的功能的帮助，请改为使用[algorithm]或任务特定的标记。

//从“../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 }); });

javascript function addeventlistener console.log queryselector

回答 0 投票 0

按钮 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 }); });

javascript function addeventlistener console.log queryselector

回答 0 投票 0

Haskell 中阻止函数运行的未知错误

我对 Haskell 非常陌生，并且收到了一个任务来创建属性列表，然后创建一个函数来输出适用于输入的属性列表，但由于某种原因它只是......

function haskell

回答 1 投票 0

花括号 - 为什么这个函数不接受不带引号的变量

有人可以帮我看看我哪里出错了吗？我认为当在管道函数中使用大括号时，您可以调用变量而不必将其括在“”中（即作为...

r function rlang

回答 1 投票 0

图灵机 - 根据输入查找第 k 个元素

问题图片目前，我正在尝试研究图灵机。它应该采用序列 k, x1, x2,...。。。 , xn 其中 k 是正整数，对于每个 i，xi 是非负整数，如...