OnClick не работает input type="button"

У меня есть этот код, который при нажатии кнопки "Получить больше полей" создаст копию всего 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>

Ответы

Ответ 1

Вы должны изменить идентификатор кнопки, чтобы отличаться от имени функции 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>

Ответ 2

Вы забыли определить атрибут onclick, чтобы что-то сделать, когда нажата кнопка, поэтому ничего не происходит, это правильное выполнение, см. ниже;

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

Ответ 3

вы также можете попробовать создать кнопку, это будет работать, если вы поместите ее вне формы;

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

Ответ 4

Когда я пытаюсь:

<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!"  />

Надеюсь, что это помогло.

Ответ 5

        button(){
        var submitelement=document.createElement('input');
        var inputelement = document.getElementById("user_details").value;
        var textareaelement = document.getElementById("user_details").value;
        submitelement.setAttribute("type", "submit", "name", "dsubmit", "value", 
        "submit");
        this.htmlElementDiv.appendChild(submitelement);
        submitelement.onclick = function(){
        document.getElementById("user_details");
        this.htmlElementDiv.appendChild(inputelement);
        this.htmlElementDiv.appendChild(inputelement);
        this.htmlElementDiv.appendChild(textareaelement);
        }

ЭТА КНОПКА РАБОТАЕТ, НО МОЖЕТ ПОЛУЧИТЬ ВЫХОД ДАННЫХ ВХОДОВ ВЫШЕ В TEXTBOX !!!