如何使用Javascript更改onclick事件？

Question

如何使用Javascript更改onclick事件？

10

如何使用Javascript更改onclick？

我尝试了以下代码，但它没有起作用。该怎么做？

<span  onclick="test_fn('aaa,bbb')" id="xx">edit</span>
<script>
    document.getElementById('xx').onclick = "test_fn(111,222)";
</script>

- mongkon mamiw

2

请注意，您的内联属性传递了一个带有逗号的字符串作为单个参数，但您尝试修改的版本传递了两个数字参数。 - nnnnnn

4个回答

3

document.getElementById('xx').onclick = function() {
  test_fn(111, 222);
};

在HTML中设置onclick时，请使用字符串。在通过JS设置时，请使用函数。

- Kyle Lin

当页面加载时，我想将 onclick="test_fn('aaa,bbb')" 更改为 onclick="test_fn('111,222')"。 - mongkon mamiw

当我测试您的代码时，我想将页面中的 id="my-span" 从 onclick="alert('foo')" 更改为 onclick="alert('baz')"，但仍然无法正常工作。 - mongkon mamiw

在我的浏览器中，当你单击 span 时，它会弹出“baz”，这正是你想要的，对吗？如果对你不起作用，那么你使用的是什么浏览器？它支持 JS 吗？ - Kyle Lin

@mongkonmamiw - 根据您的问题，所有答案都是正确的。也许可以进一步澄清？函数名称、参数数量和作用域都很重要...请描述您想要做什么，而不是您认为代码有什么问题。 - wahwahwah

0

你需要将 onclick 设置为一个函数，该函数运行你的代码 test_fn('111,222'):

<script>
  document.getElementById('xx').onclick = function() { test_fn('111,222'); }
</script>

- hackerrdave

当页面加载时，我希望将从 onclick="test_fn('aaa,bbb')" 更改为 onclick="test_fn('111,222')"。 - mongkon mamiw

1

是的，这就是它的作用。在JavaScript中，onclick需要是一个函数。 - hackerrdave

@mongkonmamiw 我有一种隐约的感觉，你正在尝试右键单击>查看源代码以查看更改。那不是浏览器的工作方式。viewsource只显示从服务器返回的初始/原始内容。您可以通过查看 live DOM（使用浏览器的 dev 控制台查看）来查看更新后的 onclick 属性。 - CrayonViolent

请注意，在JavaScript中使用.onclick不会更改实时DOM中的属性。为了做到这一点，您需要使用setAttribute函数。 - scorgn

0

我看不到你在哪里定义了函数test_fn，你在html和js中都将函数挂钩到元素onclick上..只需要一个，而且你需要实际定义这个函数

 <span id="xx">edit</span>
 <!-- or .. not both , they are doing pretty much the same thing--> 
 <script>
   document.getElementById('xx').onclick = function(){
     console.log('clicked')
   }
 </script>

现在你需要定义test_fn，它将在单击元素时被调用。

function test_fn(arg1 , arg2){
  condole.log(arg1 , arg2)
}

请注意，HTML onclick 版本传递一个参数，而JS脚本版本传递两个参数。

- Ahmed Eid

当我测试您的代码 https://jsfiddle.net/j2mbngq1/ 时，id="xx" 仍然是 onclick="test_fn('aaa,bbb')"，而没有更改为 onclick="test_fn('111,222')"。 - mongkon mamiw

编辑完成，这是另一个版本。http://jsbin.com/vutotar/edit?html,js,console,output - Ahmed Eid

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- scorgn · Accepted Answer

这里有几件事情需要处理。

首先，在您的jsfiddle中，test_fn()不是一个函数。您需要定义它以便它能被调用。

其次，您将onclick属性设置为字符串而不是函数。您需要使用以下代码将其设置为函数。

document.getElementById('xx').onclick = function() { test_fn(111,222) };

这是一个可运行的JSFiddle示例的例子。

更新

看起来我误解了问题。如果您实际上想要更改onclick属性，也就是更改HTML显示的内容，您需要使用setAttribute()。所以你的代码将会是...

document.getElementById('xx').setAttribute( "onClick", "test_fn('111,222')" );

这是更新后的 jsfiddle。

另外提一下，就像原帖中 nnnnnn 在评论中提到的那样，使用此方法时，您正在通过函数传递一个参数，即字符串111,222，但似乎您可能想要传递两个参数。如果您想将111作为第一个参数，而222作为第二个参数，则可以使用test_fn(111,222)(将参数作为整数传递)或者test_fn('111','222')(将参数作为字符串传递)来调用该函数。