将dom元素中的变量传递给onclick
将DOM元素中的变量传递给onclick是指在前端开发中，将DOM元素中的某个变量的值传递给onclick事件处理函数。这样可以在点击事件发生时，获取到该变量的值并进行相应的处理。
在HTML中，可以通过以下方式将变量传递给onclick事件：
- 使用内联事件处理函数：
<button onclick="myFunction(variable)">点击按钮</button>其中，myFunction是一个定义在JavaScript中的函数，variable是要传递的变量。
- 使用addEventListener方法：
<button id="myButton">点击按钮</button>document.getElementById("myButton").addEventListener("click", function() {
myFunction(variable);
});这里，addEventListener方法用于给按钮添加一个点击事件监听器，当按钮被点击时，执行传递的函数myFunction，并将变量variable作为参数传递给该函数。
需要注意的是，变量的作用域问题。如果变量是在某个函数内部定义的，需要确保该变量在onclick事件处理函数中是可见的。可以通过将变量定义在全局作用域中，或者将变量作为参数传递给onclick事件处理函数来解决作用域问题。
至于推荐的腾讯云相关产品和产品介绍链接地址，由于要求不能提及具体的云计算品牌商，这里无法给出具体的推荐。但是腾讯云作为一家知名的云计算服务提供商，提供了丰富的云计算产品和解决方案，可以根据具体需求选择适合的产品进行开发和部署。
相关·内容
我在两个独立的div中对一个JSON文件进行了两次搜索，在页面的两个部分上生成结果。结果由for循环产生，在这两个结果div中每一个都创建了许多隐藏div，这些结果div是通过onclick显示的。div #1中的id为"a"+i，其中我是for循环计数器。Div #2类似于隐藏id的"aa"+i。不能有重复的id。函数unhyde()中的document.getElementById为null，如果我传递隐藏的div的id以如下方式显示它：
function allWriter() {
var i = "2"; // to simulate
浏览 0提问于2015-05-02得票数 0
回答已采纳
5回答
我一定读过关于函数中的参数，以及它们是如何成为变量和/或对象并传值一百万次的文章，但现实生活中的例子总是让我迷惑。本例中的关键字" this“指向函数的对象，即form元素。好的，明白了。
现在，window.onload事件处理程序外部的函数有一个名为"frm“的参数。我的问题是，这个参数是否有必要与将要传递给它的表单元素的id同名(在本例中为'frm')？我以为这无关紧要。重要的是，只要在函数内部作为局部变量重用，就可以将任何内容放入参数中。
window.onload = function() {
// validation for submit
浏览 2提问于2011-02-08得票数 0
回答已采纳
嗨，现在我在一个我的投资组合网站上工作，我试图使一个按钮，使用相同的风格，但想要使用它的两个按钮(1)转到一些页面(2)下载简历。但它们都执行操作(1)。我不知道如何让这两个按钮做不同的工作。
这是Button的代码，
import React from 'react';
import './Button.css';
import { Link } from 'react-router-dom';
const STYLES =['btn--primary', 'btn--outline'];
const SIZE
浏览 2提问于2021-03-11得票数 0
我正在学习初学者关于useState和useRef钩子的教程，试图在react中实现一个简单的计时器。
我使用interval变量来存储来自setInterval()的值
在单击“开始”按钮时，我能够正确地console.log时间间隔的值。但是，在单击“停止”按钮时，interval.current被记录为undefined。因此，stopTimer()不能像预期的那样工作。
为什么interval.current在startTimer中明确设置(并在那里登录)时打印未定义的？我在这里错过了什么？
import React, { useState, useRef } from 're
浏览 1提问于2020-12-24得票数 1
回答已采纳
我将react组件动态呈现为：
{map.call(this.state.text, (c, i) => (<Char
click={() => this.deleteCharHandler(i)}
charVal={c}
key={i}/>))}
其中，Char组件的呈现方法为：
render() {
return(
<div className="char" onClick={this.props.click}>
浏览 8提问于2020-05-15得票数 2
回答已采纳
2回答
我有一个名为<SensorList />的React组件，它有许多子<SensorItem />(另一个React组件)。我希望能够在每个<SensorItem />上从<SensorList />中声明一个onClick事件。我尝试做了以下几件事：
sensorSelected: function(sensor) {
console.log('Clicked!');
},
render: function() {
var nodes = this.state.sensors.map(function(senso
浏览 0提问于2015-02-02得票数 67
回答已采纳
2回答
我正在写一份登记表，并试图找出一些验证。当我的validate按钮在<form>中时，我也遇到了同样的问题，但是为了解决这个问题，我只是移出了它，因为我猜想该按钮会导致表单刷新。但是，在向"ValidateForm()“函数中插入多个if语句之后，这条错误消息似乎又出现了。
错误: Uncaught : Forename.focus不是函数
at ValidateForm (登录表单ValidateForm)
at HTMLButtonElement.onclick (登录表单HTMLButtonElement.onclick)
function Validat
浏览 1提问于2018-06-15得票数 1
回答已采纳
3回答
反应函数调用方法
、、
在React中，我可以用两种不同的方式调用onClick中的函数。
第一方法:箭头函数
const Modal = ({isOpen, toggle, children}) => {
<div onClick={() => toggle()}>
<div>
{children}
</div>
</div>
}
第二种方法:不带括号的
const Modal = ({isOpen, toggle, children}) =>
{
return(
浏览 7提问于2022-01-15得票数 1
回答已采纳
知道为什么这个代码不起作用吗？我在HTML中用这个ID定义了一个文本输入字段。
$('document').ready(function()
{
$('#inputUsername').keyup(alert("something"));
}
);
浏览 6提问于2014-02-24得票数 0
回答已采纳
好的，我有一个在表中创建行的JavaScript，如下所示：
function AddRow(text,rowID) {
var tbl = document.getElementById('tblNotePanel');
var row = tbl.insertRow(tbl.rows.length);
var cell = row.insertCell();
var textNode = document.createTextNode(text);
cell.id = rowID;
cell.style.backgrou
浏览 0提问于2008-11-20得票数 16
回答已采纳
如果我的onclick事件看起来像这样：
<input .... onclick="someEvent('blah', '/some/folder/?a=1')" />
应该对?字符进行转义吗？
浏览 2提问于2010-12-30得票数 1
1回答
问题是我不能访问actuve的值或更改它？这是因为道具是不变的吗？如果是这样的话，我应该为每个EventInLife元素/组件创建一个单独的变量吗？
import React from 'react';
import styled,{ css } from 'styled-components';
const EventInLife = (props) => {
/*
adds the active theme to each element(example: if active then the styles
woul
浏览 1提问于2020-07-06得票数 0
我有以下一小段代码：
var instance = this;
window.onload = function () {
for (var i = 0; i < array.length; ++i) {
var currentDivId= array[i];
var currentDiv = document.getElementById(currentDivId);
try {
if (!currentDiv) {
throw 'Div id not found:
浏览 3提问于2011-12-26得票数 0
回答已采纳
为什么onClick不能直接在我的自定义元素上工作，如下所示？函数chosenResource不会被调用。
return (
<div>
{
resources.map(resource => {
return (
<SelectListItem key={resource.id} onClick={this.chosenResource.bind(this)} resource={resource} />
)
浏览 0提问于2017-08-17得票数 18
回答已采纳
各位，我有个很奇怪的问题。
在中，我有几个带有onClick事件的list元素，它们都调用相同的函数。
<ul>
<li onClick="Javascript:show(this.innerHTML); alert(this.innerHTML);">1</li>
<li onClick="Javascript:show(this.innerHTML); alert(this.innerHTML);">2</li>
<li onClick="Javascript:
浏览 3提问于2014-04-28得票数 1
回答已采纳
儿童部分：
export default class Button extends React.Component {
constructor(props) {
super(props);
}
render() {
return(
<div className="form-group">
<button
// Need to add dynamic html attr here e.x: data-id
key={index}
浏览 0提问于2018-02-12得票数 5
回答已采纳
问题
我试图理解为什么当单击列表中的项时，我在navItemClick下面的事件处理程序没有触发到控制台。此外，我还试图找出是否可以将onClick事件添加到NavigationSidebarItem函数中，以减少在NavigationSidebar组件中返回的每一项上重复该事件。
组件正确呈现；没有错误。我还能够成功地看到构造函数的控制台行以及JSX的加载。只是不要咯咯作响的留言！
代码示例
class NavigationSidebar extends React.Component {
constructor(props) {
super(props);
浏览 0提问于2018-06-11得票数 0
回答已采纳
我在html中有onclick方法，它将'this‘发送给js函数。在chrome，它可以工作，我可以找到最近的(“tr”)元素。但在IE浏览器中，我得到了一个错误：
对象不支持“最近”属性或方法。
我的html：
<td class="border-0" style="vertical-align: middle; width: 20px;">
<a href="javascript:void(0)" onclick="SearchLossCodeDescDam(this);" tabi
浏览 2提问于2016-05-06得票数 3
回答已采纳
我正在自学python，我正在尝试创建一个密码生成器。我想要程序做的是，生成一个随机密码并将其保存到文本文件中。我在获取密码以保存到文本文件方面有什么问题。我能够获得一个生成的密码，但是我在text_file file.write( output ) NameError中得到了一个错误代码:虽然我已经定义了输出，但没有定义名称'output‘。如果有人能告诉我我做错了什么，我会很感激的。如果需要更多的信息，请告诉我。谢谢
import random
import string
# Generates a password from random.choice
length = int
浏览 2提问于2020-06-04得票数 0
回答已采纳
我想用onl html css和javascript创建一个表，在其中我可以创建、删除数据并编辑每一列或每一行的数据。但我现在被困在里面将近4天了。我是程序初学者，请帮助我学习javascript和编程，因为这将是非常感谢的。tnx！
<!Doctype html PUBLIC "-//W3C//DTD XHTML 1.0 Transitiona//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<script ty
浏览 2提问于2013-10-05得票数 0
回答已采纳
我不明白为什么react窗口会在每个(所有) useState events上重新呈现列表，这些值甚至没有连接到列表本身。请有人解释一下，这是如何内部联系，我如何可以避免那些重新渲染？
import React, { useState } from "react";
import { FixedSizeList, areEqual } from "react-window";
function App() {
const [count, setCount] = useState(0);
const handleOnClick = ()
浏览 1提问于2021-10-07得票数 1
回答已采纳
我有一个React组件，其中包含几个Post组件。我在每个应该触发简单console.log的Post组件上都有onClick属性。我不知道为什么它不能发射。下面是代码。
class Feed extends Component {
constructor(){
super();
this.handleClick = this.handleClick.bind(this);
}
handleClick(){
console.log('hello');
}
render(){
return(
<di
浏览 0提问于2018-02-18得票数 0
我已经创建了一个BPEL流程，其中在BPEL流程级别上有两个关于varibale(数组类型)的java嵌入Activity.and。
下面是数组变量xsd。
<?xml version="1.0" encoding="UTF-8"?>
<schema attributeFormDefault="unqualified"
elementFormDefault="qualified"
targetNamespace="http://xmlns.oracle.com/RegistrationU
浏览 2提问于2011-07-01得票数 0
我有一个将div作为子级添加到dijit/layout/conentpane的函数。我遇到的问题是，在我添加这个div之后，我不能使用dom.byId来引用它:创建这个div的函数是从一个菜单项的单击事件中调用的：
菜单项：
<div id="miLMWS" data-dojo-type="dijit/MenuItem" data-dojo-props="onClick:function(){SetPage('LMWS');}">Watershed</div>
onclick函数(SetPage)：
...
浏览 0提问于2014-10-16得票数 0
<a onclick ="foo()" href="bar.html" >Link </a>
<script>
...
function foo(){
//I want to know the href property of whoever called me.
//something like this.caller.href ??
}
</script>
我想我可以分配所有的元素ID，然后将我自己的ID传递给我调用的JS方法，但是我在寻找一种更好的方法。
浏览 1提问于2009-05-06得票数 16
我正在努力使一个简单的函数在IE9中工作。它在Chrome和FF中工作得很好。其目的是拥有两个"ul“列表，并在单击时在它们之间移动"li”元素。我希望在第一个容器(MultiListAvailableElements)中具有蓝色背景的li元素，并在鼠标悬停时更改为绿色。而在第二个容器(MultiListSelectedElements)中则相反-绿色背景，鼠标悬停时变为蓝色。
问题是，在IE9元素中，在我将它们添加到相反的列表之后，它们的行为就像它们从来没有松开悬停状态一样。我必须将鼠标移到它们上面(并向外移动)，才能使它们看起来像应该的样子。例如，我单击第一个容器中的蓝色元
浏览 2提问于2012-09-18得票数 1
4回答
例如，我有两个按钮
<button class="item" ng-click="clickFun(this)">ngClick</button>
<button class="item" onClick="clickFun(this)">jQueryClick</button>
我试图访问两个按钮，它在jQuery Click中工作，但是ngClick失败了。我从ngClick那里得到了‘(空)’。
js代码：
var oneApp = angular.module(
浏览 13提问于2016-05-30得票数 2
回答已采纳
1回答
我这里有个小问题。我想从PHP循环中调用Ajax函数--这里是我的代码：
Ajax：
function ajaxFunction(){
var ajaxRequest; // The variable that makes Ajax possible!
try{
// Opera 8.0+, Firefox, Safari
ajaxRequest = new XMLHttpRequest();
}catch (e){
// Internet Explorer Browsers
try{
ajaxRequest = new ActiveXObjec
浏览 3提问于2014-03-13得票数 0
3回答
我已经定义了一个function plusOne()，它应该将一个变量加+1 (然后将一个元素的innerHTML设置为该变量)。单击button时将调用该函数。
但是，+1的加法只起一次作用。为了在每次单击按钮时将+1添加到变量，我必须如何更改我的函数？
下面是我的函数和超文本标记语言现在的样子，以及一个JSFiddle：
function plusOne() {
var number = 1;
var count = document.getElementById('count');
number++;
count.innerHTML = number
浏览 33提问于2018-01-24得票数 1
回答已采纳
在下面的示例中，为什么输入test的value不更新为second？
<html>
<head>
<script type="text/javascript">
getText = function() {
var test = document.getElementById('test').value;
test = "second";
//note: if you insert "alert(test)" it returns
浏览 1提问于2011-06-07得票数 4
回答已采纳
在下面的代码中，这个对象是什么？它引用的是h1，但是如果我编写h1.innerHMTL，它就不工作了。
或者如果我写document.getElementByTagName("h1").innerHTML = 'Oops!'
也不起作用。
什么是“这个”引用，可以有人把它写出来。我只是有点困惑。
<!-- Works -->
<h1 onclick="this.innerHTML='Ooops!'">Click on this text!</h1>
<!-- Works -->
浏览 0提问于2018-05-13得票数 0
回答已采纳
2回答
我有一张表td如下。
$roomRowId.append("<td onclick='updateBookingRooms(" + roomId + "," + date + ")'></td>");
当用户单击此td时，我必须调用javascript函数。
updateBookingRooms(id，date).
id变为真值，但日期不是真vaue。
例如，如果(1，02/04/2013)接收到id=1，date = 0.00012419274714356681
有什么问题吗?如何检索原始日期值。
浏览 1提问于2013-04-22得票数 2
回答已采纳
3回答
我的下课有多个div。我在课堂上有一个点击事件。我想得到被点击的div。
<div class="subcat"><a href="#">abc</div>
<div class="subcat"><a href="#">def</div>
<div class="subcat"><a href="#">ghi</div>
<div class="subcat">&
浏览 2提问于2013-09-13得票数 0
回答已采纳
3回答
我参加了Dan关于egghead.io的redux课程，他创建了一个输入字段并分配了一个ref属性，它看起来像是一个功能assignment.The代码，如下所示，
<input ref={node => {input = node;}} />
<button onClick={() => { input.value = ''}> ADD</button>
请你解释一下，谢谢！
浏览 8提问于2020-12-16得票数 0
回答已采纳
有时，我在useCallback中声明一个咖喱函数时使用这种模式。
const Child = ({ handleClick }) => {
return (
<>
<button onClick={handleClick("foo")}>foo</button>
<button onClick={handleClick("lorem")}>lorem</button>
</>
);
};
export default function
浏览 2提问于2021-09-11得票数 5
回答已采纳
我正在使用react和functional，并想知道如何向react onClick事件中添加多个params。
我知道要做到这一点有不同的选择。在过去，我使用了下面的样式(来自)：
class LoggingButton extends React.Component {
handleClick() {
console.log('this is:', this);
}
render() {
// This syntax ensures `this` is bound within handleClick
return (
&l
浏览 5提问于2021-03-18得票数 0
我在试着找到结账的解决方案。这是为我制作的一个定制应用程序，其中用户选择一件T恤，设计，墨水颜色，尺寸等。这是一个纯粹的as3闪光应用程序，最终将在品牌网站上托管。我有API用户名和证书，我目前正在使用一个购买按钮，它使用的代码片段从贝宝HTML按钮代码。//这些是白色Design1产品的“立即购买”按钮的代码片段。
//Listeners
buyTingBtn.addEventListener(MouseEvent.CLICK, buyTINGnow);
//Functions
function buyTINGnow (event:MouseEvent):void
{
var
浏览 1提问于2013-05-16得票数 0
假设我有一些HTML锚元素，我想为每个元素设置一个处理程序。
window.onload = function() {
// I select all of the anchors
var myAnchors = document.querySelectorAll("a");
// I iterate through the anchors and set a handler to each of them
for (var i = 0; i < myAnchors.length; i++) {
myAnchors[i].
浏览 7提问于2015-12-24得票数 0
回答已采纳
我有以下反应代码
const { useState, useMemo, Fragment } = React;
function Rand() {
return <Fragment>{Math.random()}</Fragment>;
}
const App = () => {
const [show, setShow] = useState(true);
// The inline component gets memoized. But <Rand /> does not
const workin
浏览 4提问于2021-06-30得票数 5
我有以下按钮设置：
<div class="BlogManagementDiv">
<button type="button" onclick="fnToggleBox(AddcategoryDiv)">Add Category</button>
<div id="AddcategoryDiv" class="BlogManagementcontaine
浏览 1提问于2016-04-11得票数 0
回答已采纳
是否可以使用ReactJS将父元素中的所有事件添加到所有子元素中，而无需对所有事件进行硬编码？
<div className='myClass' onClick={handleSelect} onDoubleClick={handleOpen}>
<span className='child' />
</div>
浏览 7提问于2022-03-23得票数 -1
回答已采纳
2回答
我不知道如何在JavaScript中通过值将参数传递给onClick-function。我一直在尝试闭包功能，但它似乎不起作用！啊哈
...
for(var i=0; i<=15; i++){
blockNr++;
meal = getMealByCategory(category, i);
place.innerHTML += "<div class='container-fluid' name='blockName' id='blockName" +
blockNr + "'
浏览 3提问于2014-12-09得票数 1
回答已采纳
在我的html页面上，我有一个ID为100的checkbox：
<input type=checkbox id=100 onClick="change2(this)" checked>
在javascript中，我在函数中为有向图使用ID：
function change2(el) {
chart.setVisibility(el.id, el.checked);
}
问题是，第一个图形图表需要由id=0启动，以获得该系列的可见性。我有两个图表在我的网站上，所以第一个图表使用ID的0-15，和车颊必须有唯一的ID的。
如何更改函数以操作复选框的id？有点像char
浏览 2提问于2015-09-23得票数 0
回答已采纳
1回答
我动态地将以下元素添加到DOM中。
<li id="my-link"><a href="#">Click!</a></li>
由于样式问题(引导)，我需要保留<a href="#">部件，我想在单击它时删除它。我将上述代码更改为
<li id="my-link"><a href="#" onclick='$(this).remove()'>Click!</a></li>
效果很好。然后，我意识
浏览 1提问于2014-02-03得票数 0
回答已采纳
我正在尝试触发另一个onClick事件函数上的单击按钮。
错误: Uncaught : this.clickBack.current.click不是函数
React版本为16.8.6
constructor(props) {
super(props)
this.clickBack = React.createRef();
this.startInterview = this.startInterview.bind(this);
}
startInterview(){
console.log('hello') // output : h
浏览 0提问于2019-07-24得票数 3
回答已采纳
使用和不使用$(document).ready编写代码有什么区别
例如：
$(document).ready(function() {
$("#button").click(function() {
//Code
});
});
和：
$("#button").click(function() {
//Code
});
和：
<input id="button" type="button" value="Cancel" onclick="hidedropdow
浏览 0提问于2013-03-29得票数 2
回答已采纳
我有一个javascript脚本，它有一个名为fuctionone()的函数，可以显示图形。我在下面的p标记中调用这个脚本，这样当单击“HERE”时，图形就会显示在每个标题的下面。
<svg width="480" height="250">
<div class="row">
<div class="col-sm-6">
<div class="card">
<div class="card-block&
浏览 0提问于2017-01-12得票数 0
1回答
下面的代码生成一个网站，让用户有机会使用相应的ingredient (输入字段)输入amount。
用户按下add按钮后，ingredient和amount的输入将显示在表中。此外，添加行的第三个单元格应该是一个删除按钮。
提供的代码中，目前唯一不起作用的部分是创建remove按钮。我是网络开发和车把库的超级新手。
我的问题是如何正确地显示按钮，同时使用工具栏库？，而不是显示实际的按钮[object HTMLButtonElement]。我相信这是可能的，但我找不到正确的方法。
代码：
<html>
<head>
<script src=&
浏览 3提问于2020-04-22得票数 2
回答已采纳
在以下代码中，this.tick.bind(this)语句中的绑定是做什么的：
export class Counter extends React.Component {
constructor(props) {
super(props);
this.state = {count: props.initialCount};
}
tick() {
this.setState({count: this.state.count + 1});
}
render() {
return (
<div onClick={this.tic
浏览 1提问于2015-08-20得票数 6
回答已采纳
下面的代码是我正在尝试做的事情的示例。在较小的scale.This代码中，实际上不会清除间隔，它们只是开始堆叠。谢谢!
<script>
var num = 0;
var counter = setInterval('start_count()',1000);
function start_count(type){
num++;
document.getElementById('num_div').innerHTML = num;
}
function stop_count(){
clearInterval(counter);
浏览 2提问于2012-11-28得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
