onclick 相关问题

制作按钮以在 12 小时和 24 小时时间之间切换并保存到本地存储

我的网站上有一个时钟，我想添加一个按钮或切换到设置，以切换 12 小时和 24 小时时间，反之亦然。 我的问题是我不知道在哪里可以联系...

onclick时在repeater中查找div

我的朋友们，我想更改单击按钮（asp.net）中的标签div的类，但该div位于转发器内，我怎样才能找到它？并换班级？ 实际上，我想更改 bootstrap 列

如何在 React 中更改映射数组的各个部分的状态

我有一个映射数组，设置为看起来像扑克牌。当我点击它们时，我需要它们“翻转”。现在我的 onclick“有效”，状态/属性从“面朝上”变为“面朝下”，但是...

启用 .active 类时，下拉菜单将丢失所有样式，但使用 on:hover 则可以工作

我在下拉组件中遇到了奇怪的行为，我无法弄清楚是什么原因导致了问题。非常感谢任何帮助！ 这是一个简单的下拉菜单。我使用了 React、CSS 和 JavaScript

使点击内部div不调用外部div的onClick函数[重复]

可能的重复： 单击超链接时防止触发父容器单击事件 我有 ... ... 我确实...

为什么我的 querySelector 没有为 HTML 表单中的步骤选择正确的 ID？

当我按下按钮时，我的 digiNextStepMobil 未正确调用，并且表单未进入步骤 2。 超文本标记语言 当我按下按钮时，我的 digiNextStepMobil 未正确调用，并且表单未进入第 2 步。 HTML <form id="digi-productGuideForm-mobil"> <div id="digi-step1-1" class="digi-step"> <h2>Hvor skal ladestanderen placeres?</h2> <label><input id="beskrivelser" type="radio" name="placement" value="commonParking">Fælles p-plads</label><br> <label><input type="radio" name="placement" value="parkingGarage"> P-kælder</label><br> <label><input type="radio" name="placement" value="residentParking"> Beboerens egen p-plads</label><br> <nav id="digi-buttons"> <button type="button" id="digi-næsteKnap1" onclick="digiNextStepMobil()">Næste</button> </nav> </div> <div id="digi-step2-1" class="digi-step" style="display: none;"> <h2>Hvor mange ladeudtag har foreningen brug for?</h2> <label><input type="radio" name="outlets" value="upTo10"> Op til 10 ladeudtag</label><br> <label><input type="radio" name="outlets" value="moreThan10"> Mere end 10 ladeudtag</label> <br> <nav id="digi-buttons"> <button type="button" id="digi-tilbageKnap1" onclick="digiPreviousStepMobil()"><span class="material-symbols-outlined"> arrow_back_ios </span> Tilbage</button> <button type="button" id="digi-næsteKnap1" onclick="digiNextStepMobil()">Næste</button> </nav> </div> /* And so on with step digi-step3-1 and digi-step 4-1. */ 脚本 function digiNextStepMobil() { var digiCurrentStep = document.querySelector('.digi-step:not([style*="display: none"])'); var digiNextStep = digiCurrentStep.nextElementSibling; if (digiCurrentStep.id === "digi-step1-1") { var digiPlacement = document.querySelector('input[name="placement"]:checked').value; if (digiPlacement === "residentParking" || digiPlacement === "parkingGarage") { document.getElementById("digi-step2-1").style.display = "none"; document.getElementById("digi-step3-1").style.display = "none"; digiNextStep = document.getElementById("digi-step4-1"); } } if (digiCurrentStep.id === "digi-step3.1") { var digiHomes = document.querySelector('input[name="homes"]:checked').value; if (digiHomes === "moreThan40") { digiShowResultMobil(); return; } } if (digiNextStep) { digiShowStep(digiNextStep); } } 我尝试用不允许的点和（-）来给出 ID 的不同名称，但事实并非如此。 id="digi-tilbageKnap1" 您已发布此两次。 此错误 html 中的 ID 必须是唯一的。 如果您在正确的 css 中多次声明 ids ，它可能会起作用，但在 javascript 中不起作用。 所以总是给出不同的 id。

如何通过onclick事件将图像保存到localStorage？ (javascript)

在不使用后端的情况下，我正在尝试执行购物车功能，因此当我单击一个页面上的图像时，它会将图像保存到 localStorage 中，以便可以在另一页面（结账页面）上显示。 我...

QML TapHandler：如何确保只有最顶层的处理程序获取事件

据我了解，如果您有多个 QML TapHandler 覆盖同一位置，则默认情况下它们都会获取点击事件；但您可以使用 scrapPermissions 属性更改此行为....

我的 javascript 秒表项目无法正常工作

我用JS编写了一个秒表观看教程。但问题是，当我更改代码中的某些内容时，我的导师做了一些我不理解的事情。因此，每当我点击更改后...

无法在 javascript 中停止侦听器

我正在与 Pikaday (https://github.com/Pikaday/Pikaday) 合作。 我正在尝试创建一个同时打开两个月的日历，这样可以选择日期范围。 一切正常

在React中捕获Datalist选项的点击事件

假设 React 组件中有这个 Datalist 元素： const MyComp = () => { 返回（<> ...

点击按钮2-3次后才会发生点击事件

我正在编写一个多动症药物剂量计算器。但是，当我按“转换！”时我必须单击它几次才能显示占位符文本。这是怎么回事？我什么也没尝试...

Android Studio：显示我的 Android 画廊中的图像

我是 Java 和 Android Studio 编程新手。我正在尝试创建一个简短的应用程序，感谢这里其他程序员的帖子：一个带有“从图库浏览”按钮的应用程序 -> 当我单击...

为什么 onClick 行为异常并且有时不显示其背后的数据？

打字稿新手，现在已经使用它 2 天了，主要是为我的 Streamlit 应用程序构建自定义组件。我创建了下面的导航栏，自定义组件是一个选项卡，可以是

在触发 onClick 事件时无法将焦点设置在 Material UI 中的工具提示组件的内容上，但可以在触发 onKeyPress 事件时

我在自定义的 TooltipComponent 中使用 MUI 中的 Tooltip 组件。 TooltipComponent 的工作方式与 Dialog 类似：用户可以在单击（而不是悬停）元素（div 与...

Unity On Click() 按钮界面不显示功能

我对 Unity 相当陌生，但我遇到了 Button 函数继承的问题。我有一个 UI 对象，其中包含 game_controller 脚本和三个按钮作为子对象。当我尝试添加

onClick 在组件中不起作用 - Reactjs

我正在制作一个小型 React 项目，在下拉列表中，我使用 onClick 并调用其中的函数。 在这里，我正在映射通过键入关键字获得的数据。对于每个数据，我都调用不同的...

JavaScript - document.getElementByID 与 onClick

我正在尝试在 HTML 文档中编写一个简单的游戏，只是为了好玩。其中有一个图像，单击后会添加到您的分数中。 我在分数添加函数中创建了一个简单的 if 语句 w...

如何在单击事件上向按钮的现有类添加另一个类名

我有一个表单，单击按钮即可发送电子邮件。但是，在发送电子邮件时，该按钮保持活动状态，允许用户多次单击它，这会中断电子邮件发送...

我可以在for循环中执行“onClick”函数吗？

我制作了html页面，您可以在其中单击并通过html元素的id激活功能。 我用了很多 JavaScript 代码。我可以通过for循环短路吗？ 这是我的html代码： 我制作了 html 页面，您可以在其中单击并通过 html-element 的 id 激活功能。 我用了很多 JavaScript 代码。我可以通过 for 循环短路吗？ 这是我的html代码： <ul> <li class="card" id="c0"><img id="i0" src="images\westren_wall.jpg"></li> <li class="card" id="c1"><img id="i1" src="images\westren_wall.jpg"></li> <li class="card" id="c2"><img id="i2" src="images\idf.jpg"></li> <li class="card" id="c3"><img id="i3" src="images\idf.jpg"></li> <li class="card" id="c4"><img id="i4" src="images\jerusalem.jpg"></li> <li class="card" id="c5"><img id="i5" src="images\jerusalem.jpg"></li> <li class="card" id="c6"><img id="i6" src="images\sixDays.jpg"></li> <li class="card" id="c7"><img id="i7" src="images\sixDays.jpg"></li> <li class="card" id="c8"><img id="i8" src="images\BGurion.jpg"></li> <li class="card" id="c9"><img id="i9" src="images\BGurion.jpg"></li> <li class="card" id="c10"><img id="i10" src="images\hertzel.png"></li> <li class="card" id="c11"><img id="i11" src="images\hertzel.png"></li> <li class="card" id="c12"><img id="i12" src="images\vaizman.png"></li> <li class="card" id="c13"><img id="i13" src="images\vaizman.png"></li> <li class="card" id="c14"><img id="i14" src="images\menora.jpg"></li> <li class="card" id="c15"><img id="i15" src="images\menora.jpg"></li> <li class="card" id="c16"><img id="i16" src="images\knesset.jpg"></li> <li class="card" id="c17"><img id="i17" src="images\knesset.jpg"></li> 我用它来激活一个功能，当点击这个JavaScript代码时： document.getElementById("c0").onclick = function(){openCard("i0",1)}; document.getElementById("c1").onclick = function(){openCard("i1", 1)}; document.getElementById("c2").onclick = function(){openCard("i2",2)}; document.getElementById("c3").onclick = function(){openCard("i3",2)}; document.getElementById("c4").onclick = function(){openCard("i4",3)}; document.getElementById("c5").onclick = function(){openCard("i5",3)}; document.getElementById("c6").onclick = function(){openCard("i6",4)}; document.getElementById("c7").onclick = function(){openCard("i7",4)}; document.getElementById("c8").onclick = function(){openCard("i8",5)}; document.getElementById("c9").onclick = function(){openCard("i9",5)}; document.getElementById("c10").onclick = function(){openCard("i10",6)}; document.getElementById("c11").onclick = function(){openCard("i11",6)}; document.getElementById("c12").onclick = function(){openCard("i12",7)}; document.getElementById("c13").onclick = function(){openCard("i13",7)}; document.getElementById("c14").onclick = function(){openCard("i14",8)}; document.getElementById("c15").onclick = function(){openCard("i15",8)}; document.getElementById("c16").onclick = function(){openCard("i16",9)}; document.getElementById("c17").onclick = function(){openCard("i17",9)}; 我可以通过 for 循环缩短此代码行吗？ 是的，你可以做得更容易： for(var i = 0;i <= 17;i++){ document.getElementById("c" + i).onclick = function(){ openCard("i" + i, Math.floor(i / 2) + 1); }; } 处理此问题的最佳方法是通过事件委托：将 click 钩在 ul 上，然后使用 e.target 来引用所单击的特定 img。存储您需要的有关该元素的任何信息： <ul id="list"> <li class="card" id="c0"><img data-card="i0" data-index="0" src="images\westren_wall.jpg"></li> <li class="card" id="c1"><img data-card="i1" data-index="0" src="images\westren_wall.jpg"></li> <li class="card" id="c2"><img data-card="i2" data-index="1" src="images\idf.jpg"></li> <!-- ... --> </ul> 然后只有一名处理程序： document.getElementById("list").addEventListener("click", function(e) { openCard(e.target.getAttribute("data-card"), +e.target.getAttribute("data-index")); }); 或者如果您更喜欢.onclick（但没有理由这样做，除非您必须支持像 IE8 这样真正过时的浏览器）： document.getElementById("list").onclick = function(e) { openCard(e.target.getAttribute("data-card"), +e.target.getAttribute("data-index")); }; 实例： document.getElementById("list").addEventListener("click", function(e) { openCard(e.target.getAttribute("data-card"), +e.target.getAttribute("data-index")); }); function openCard(card, index) { console.log("card = " + card + ", index = " + index); } <ul id="list"> <li class="card" id="c0"><img data-card="i0" data-index="0" src="images\westren_wall.jpg"></li> <li class="card" id="c1"><img data-card="i1" data-index="0" src="images\westren_wall.jpg"></li> <li class="card" id="c2"><img data-card="i2" data-index="1" src="images\idf.jpg"></li> <!-- ... --> </ul> 实际上，再看一下标记，您根本不需要 data-card；它是 img 的父元素，所以： <ul id="list"> <li class="card"><img data-index="0" src="images\westren_wall.jpg"></li> <li class="card"><img data-index="0" src="images\westren_wall.jpg"></li> <li class="card"><img data-index="1" src="images\idf.jpg"></li> <!-- ... --> </ul> 和 document.getElementById("list").addEventListener("click", function(e) { openCard(e.target.parentNode, +e.target.getAttribute("data-index")); }); ...您需要更改 openCard，以便它需要元素本身，而不是 id。 实例： document.getElementById("list").addEventListener("click", function(e) { openCard(e.target.parentNode, +e.target.getAttribute("data-index")); }); function openCard(element, index) { // use `element` and `index` here, the following code is just for the demo: element.appendChild(document.createTextNode(" opened, index = " + index)); } <ul id="list"> <li class="card"><img data-card="i0" data-index="0" src="images\westren_wall.jpg"></li> <li class="card"><img data-card="i1" data-index="0" src="images\westren_wall.jpg"></li> <li class="card"><img data-card="i2" data-index="1" src="images\idf.jpg"></li> <!-- ... --> </ul> 如果您在每个 img 元素上设置自定义属性（如 data-img-index ），那么您可以在每个类名上设置值为 card 的单击事件。最后获取 id 和自定义属性值，即 data-img-index 像这样传递你的 openCard(id, attr); 方法 ID：var id = this.children[0].id; 自定义属性： var attr = this.children[0].attributes['data-img-index'].nodeValue; var classname = document.getElementsByClassName("card"); for (var i = 0; i < classname.length; i++) { classname[i].addEventListener('click', function() { var id = this.children[0].id; var attr = this.children[0].attributes['data-img-index'].nodeValue; openCard(id, attr); }); } function openCard(id, num) { console.log(id, num) } <html> <body> <ul> <li class="card" id="c0"><img id="i0" data-img-index=1 src="images\westren_wall.jpg"></li> <li class="card" id="c1"><img id="i1" data-img-index=1 src="images\westren_wall.jpg"></li> <li class="card" id="c2"><img id="i2" data-img-index=2 src="images\idf.jpg"></li> <li class="card" id="c3"><img id="i3" data-img-index=2 src="images\idf.jpg"></li> <li class="card" id="c4"><img id="i4" data-img-index=3 src="images\jerusalem.jpg"></li> <li class="card" id="c5"><img id="i5" data-img-index=3 src="images\jerusalem.jpg"></li> <li class="card" id="c6"><img id="i6" data-img-index=4 src="images\sixDays.jpg"></li> <li class="card" id="c7"><img id="i7" data-img-index=4 src="images\sixDays.jpg"></li> <li class="card" id="c8"><img id="i8" data-img-index=5 src="images\BGurion.jpg"></li> <li class="card" id="c9"><img id="i9" data-img-index=5 src="images\BGurion.jpg"></li> <li class="card" id="c10"><img id="i10" data-img-index=6 src="images\hertzel.png"></li> <li class="card" id="c11"><img id="i11" data-img-index=6 src="images\hertzel.png"></li> <li class="card" id="c12"><img id="i12" data-img-index=7 src="images\vaizman.png"></li> <li class="card" id="c13"><img id="i13" data-img-index=7 src="images\vaizman.png"></li> <li class="card" id="c14"><img id="i14" data-img-index=8 src="images\menora.jpg"></li> <li class="card" id="c15"><img id="i15" data-img-index=8 src="images\menora.jpg"></li> <li class="card" id="c16"><img id="i16" data-img-index=9 src="images\knesset.jpg"></li> <li class="card" id="c17"><img id="i17" data-img-index=9 src="images\knesset.jpg"></li> </ul> </body> </html> 是的，您可以编写一个循环来附加所有这些处理程序。但在包含所有 li 的 ul 上放置一个 onclick 处理程序会更容易。当单击发生时，Javascript 将在祖先元素列表中一直查找处理程序（还有更多内容，但目前已经足够接近了）。 然后，处理程序可以查看原始的“目标”元素，以准确找出要传递给 opencard() 函数的参数。您可以将参数值放在该元素上的某个位置（可能在属性中，因此您可以使用 getAttribute() 获取它们），或者您的处理程序可能能够计算它们。在您的示例中，您可以通过获取目标元素的 ID 并将“c”更改为“i”来计算第一个参数，并通过一些算术计算第二个参数。 您可以自动生成 HTML 和 JavaScript。 我在示例中使用了 jQuery，但您也可以使用纯 JavaScript 来实现此目的。 // Generate your html // Only specify the pictures you want to display // The pictures are the only differences you have on your <li> const data = [ 'images\westren_wall.jpg', 'image2', 'image3', 'image4', 'image5', ].map((x, xi) => `<li class="card" id="c${xi}"><img id="i${xi}" src="${x}"></li>`); // Insert it into the page at the right position $("#myData").html(data); // trigger the clicks for each <li> having the card class $('.card').each(function(x) { $(this).click(function() { // It will say hi when you i'll click on a <li>! console.log(`Hi i'm number ${this.getAttribute('id')}`); }); });<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul id="myData"> <!-- Where the <li> are going to get inserted --> </ul>