Question

如果我通过JS向输入添加onclick属性，它不会显示在HTML中，但会执行该功能。如果我通过HTML添加输入，它会显示onlick属性，但它不起作用。参见

button.onclick=toggleNav;

var button = document.createElement("input");
button.type = "button";
button.value = "JS Btn";
button.onclick = toggleNav;
document.body.prepend(button);

function toggleNav() {
  $("nav").toggle("slow");
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" onclick="toggleNav" value="HTML btn">
<nav>Test</nav>

有什么问题？感谢

Answer 1

您应该在onclick属性中运行该功能，而不是仅仅声明它。

将此onclick="toggleNav"更改为此onclick="toggleNav()"

var button = document.createElement("input");
button.type = "button";
button.value = "JS Btn";
button.onclick = toggleNav;
document.body.prepend(button);

function toggleNav() {
  $("nav").toggle("slow");
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" onclick="toggleNav()" value="HTML btn">
<nav>Test</nav>

Answer 2

如果通过html添加输入，它会显示onlick属性，但它不起作用

因为您需要调用处理程序：

 onclick="toggleNav(event)"

我通过JS在输入中添加了一个onclick属性，它没有显示在html中，但是它执行了该函数。

为什么你认为它应该出现在某个地方？

Answer 3

这是因为您没有在onclick中调用该函数。你需要像

一样调用它

onclick="toggleNav()"

var button = document.createElement("input");
button.type = "button";
button.value = "JS Btn";
button.onclick = toggleNav;
document.body.prepend(button);

function toggleNav() {
  $("nav").toggle("slow");
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="button" onclick="toggleNav()" value="HTML btn">
<nav>Test</nav>

button.onclick = FUNC;不出现在HTML中

3 个答案: