输入类型 =“按钮”的 onClick 功能不起作用答案

【问题标题】：onClick function of an input type="button" not working输入类型 =“按钮”的 onClick 功能不起作用
【发布时间】：2014-03-29 02:47:12
【问题描述】：

我有这段代码，单击“获取更多字段”按钮将创建整个 div 的副本并创建字段。但是在单击按钮时没有任何反应。所有其他按钮工作正常。不知道我做错了什么。提前感谢您的帮助。

<html>
<head>
</head>
<body>

<div id="readroot" style="display: none">

    <input type="button" value="Remove review"
        onclick="this.parentNode.parentNode.removeChild(this.parentNode);" /><br /><br />

    <input name="cd" value="title" />

    <select name="rankingsel">
        <option>Rating</option>
        <option value="excellent">Excellent</option>
        <option value="good">Good</option>
        <option value="ok">OK</option>
        <option value="poor">Poor</option>
        <option value="bad">Bad</option>
    </select><br /><br />

    <textarea rows="5" cols="20" name="review">Short review</textarea>
    <br />Radio buttons included to test them in Explorer:<br />
    <input type="radio" name="something" value="test1" />Test 1<br />
    <input type="radio" name="something" value="test2" />Test 2

</div>

<form method="post" action="index1.php">

    <span id="writeroot"></span>

    <input type="button" id="moreFields" value="Give me more fields!"  />
    <input type="submit" value="Send form" />

</form>
</body>
</html>

<script>

var counter = 0;


function moreFields() {
    counter++;
    var newFields = document.getElementById('readroot').cloneNode(true);
    newFields.id = '';
    newFields.style.display = 'block';
    var newField = newFields.childNodes;
    for (var i=0;i<newField.length;i++) {
        var theName = newField[i].name
        if (theName)
            newField[i].name = theName + counter;
    }
    var insertHere = document.getElementById('writeroot');
    insertHere.parentNode.insertBefore(newFields,insertHere);
}

window.onload = moreFields;
</script>

【问题讨论】：

在 chrome 中打开它，右键单击页面上的任意位置 -> 检查元素并检查打开面板的右下角是否有红色 x 并单击它。有什么错误吗？如果是这样，请在此处分享这些错误
之前检查过错误。没有错误显示
把你的脚本标签放在正文标签里面
该按钮中没有定义 onclick 方法，就像 Sajith 在他的回答中所说的那样
我之前也尝试过 onclick() 函数，但它仍然无法正常工作。

标签： javascript php jquery html

【解决方案1】：

当我尝试时：

<input type="button" id="moreFields" onclick="alert('The text will be show!!'); return false;" value="Give me more fields!"  />

效果很好。所以我认为问题在于 moreFields() 函数的位置。确保该函数将在您的输入标记之前定义。

请尝试：

<script type="text/javascript">
    function moreFields() {
        alert("The text will be show");
    }
</script>

<input type="button" id="moreFields" onclick="moreFields()" value="Give me more fields!"  />

希望对您有所帮助。

【讨论】：

【解决方案2】：

您必须将按钮的 ID 更改为与功能名称不同 JSFiddle

var counter = 0;


function moreFields() {
  counter++;
  var newFields = document.getElementById('readroot').cloneNode(true);
  newFields.id = '';
  newFields.style.display = 'block';
  var newField = newFields.childNodes;
  for (var i = 0; i < newField.length; i++) {
    var theName = newField[i].name
    if (theName) newField[i].name = theName + counter;
  }
  var insertHere = document.getElementById('writeroot');
  insertHere.parentNode.insertBefore(newFields, insertHere);
}

window.onload = moreFields();

<div id="readroot" style="display: none">
  <input type="button" value="Remove review" onclick="this.parentNode.parentNode.removeChild(this.parentNode);" />
  <br />
  <br />
  <input name="cd" value="title" />
  <select name="rankingsel">
    <option>Rating</option>
    <option value="excellent">Excellent</option>
    <option value="good">Good</option>
    <option value="ok">OK</option>
    <option value="poor">Poor</option>
    <option value="bad">Bad</option>
  </select>
  <br />
  <br />
  <textarea rows="5" cols="20" name="review">Short review</textarea>
  <br />Radio buttons included to test them in Explorer:
  <br />
  <input type="radio" name="something" value="test1" />Test 1
  <br />
  <input type="radio" name="something" value="test2" />Test 2</div>
<form method="post" action="index1.php"> <span id="writeroot"></span>

  <input type="button" onclick="moreFields();" id="moreFieldsButton" value="Give me more fields!" />
  <input type="submit" value="Send form" />
</form>

【讨论】：

MaveRick 我删除了 id=moreFields 并且它有效..非常感谢
你能告诉我为什么它不早点工作吗？有什么冲突吗？
因为你在哪里调用对象“moreFields”，它是一个 HTML 元素，而不是调用函数“moreFields”，所以文档中的每个元素都将是一个以其 ID 命名的 JS 对象，所以你不能像元素 ID 一样命名函数
也可以屏蔽名字。我刚刚在 Chrome 和 Opera 中遇到了这个错误，但在 Firefox 中没有，可能是因为表单是动态生成的。 jsfiddle jsfiddle.net/44wuu776 与 3 个浏览器的行为相同。

【解决方案3】：

您也可以尝试创建一个按钮，如果您将它放在表单之外，这将起作用；

<button onClick="moreFields(); return false;">Give me more fields!</button>

【讨论】：

也试试..非常感谢

【解决方案4】：

您忘记定义一个 onclick 属性来在单击按钮时执行某些操作，所以没有发生任何事情是正确的执行，见下文；

<input type="button" id="moreFields" onclick="moreFields()" value="Give me more fields!"  />
                                     ----------------------

【讨论】：

也尝试了 onclick() 功能，但仍然无法正常工作
你把script标签放在body标签里面了吗？
是的，我将脚本标签放在正文标签中，但它仍然无法正常工作