Question

我想创建一个按钮并使用javascript向此按钮添加onclick功能但是onclick功能存在问题。当我按下面的代码添加按钮时，我看不到Chrome上的引号。如何添加带参数的onclick函数？

myButton+= "<button onclick='addNewproperty('" + property + "','" + entry + "')' class='btn grey btn-circle' style='font-size: x-small; float: left'><i class='fa fa-times'></i>";
myButton+= entry.length > 12 ? entry.substring(0,12) + "..." : entry;
myButton+= "</button>"

Answer 1

你可以逃避引用。由于您使用相同类型的引号作为包装和内部引号，它实际上就像<button onclick="addNewproperty("一样。

myButton+= "<button onclick=\"addNewproperty('" + property + "','" + entry + "')\" class='btn grey btn-circle' style='font-size: x-small; float: left'><i class='fa fa-times'></i>";
myButton+= entry.length > 12 ? entry.substring(0,12) + "..." : entry;
myButton+= "</button>";

Answer 2

您也可以使用反对`来包装变量。

＆＃13;

var hello = "Hello";
var myButton = "";
myButton+= "<button onclick='alert(`" + hello + "`)' class='btn grey btn-circle' style='font-size: x-small; float: left'><i class='fa fa-times'></i>";
myButton+= "</button>"

document.getElementById("div").innerHTML = myButton

＆＃13;

<div id="div">

</div>

＆＃13;

Answer 3

基于this回答和我的自我体验，有时你会使用onClick而不是onclick。

Answer 4

为了更方便，您可以在按钮元素中添加id，例如：

myButton += "<button id='someId'>"

然后，您可以通过以下方式向元素添加onClick或任何事件：

document.getElementById("someId").addEventListener('click', function(){
   alert("Button clicked")
})

如何从javascript添加onclick功能？

4 个答案: