onClick function of an input type button not working

Question

I have this code which on clicking the button  Get more fields  will create a copy of the entire div and create fields  But on clicking the button nothing is happening  All the other buttons are working fine  Don t know what I m doing wrong  Thanks for your help in advance    lt html gt   lt head gt   lt  head gt   lt body gt    lt div id  readroot  style  display  none  gt        lt input type  button  value  Remove review          onclick  this parentNode parentNode removeChild this parentNode      gt  lt br   gt  lt br   gt        lt input name  cd  value  title    gt        lt select name  rankingsel  gt           lt option gt Rating lt  option gt           lt option value  excellent  gt Excellent lt  option gt           lt option value  good  gt Good lt  option gt           lt option value  ok  gt OK lt  option gt           lt option value  poor  gt Poor lt  option gt           lt option value  bad  gt Bad lt  option gt       lt  select gt  lt br   gt  lt br   gt        lt textarea rows  5  cols  20  name  review  gt Short review lt  textarea gt       lt br   gt Radio buttons included to test them in Explorer  lt br   gt       lt input type  radio  name  something  value  test1    gt Test 1 lt br   gt       lt input type  radio  name  something  value  test2    gt Test 2   lt  div gt    lt form method  post  action  index1 php  gt        lt span id  writeroot  gt  lt  span gt        lt input type  button  id  moreFields  value  Give me more fields      gt       lt input type  submit  value  Send form    gt    lt  form gt   lt  body gt   lt  html gt    lt script gt   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 lt 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   lt  script gt

User · Answer

you could also try creating a button  this will work if you put it outside of the form    lt button onClick  moreFields    return false   gt Give me more fields  lt  button gt

User · Answer

You have to change the ID of the button to be different from the function name JSFiddle   x000D   x000D  var counter   0  x000D   x000D   x000D  function moreFields     x000D    counter    x000D    var newFields   document getElementById  readroot   cloneNode true   x000D    newFields id       x000D    newFields style display    block   x000D    var newField   newFields childNodes  x000D    for  var i   0  i  lt  newField length  i      x000D      var theName   newField i  name x000D      if  theName  newField i  name   theName   counter  x000D      x000D    var insertHere   document getElementById  writeroot    x000D    insertHere parentNode insertBefore newFields  insertHere   x000D    x000D   x000D  window onload   moreFields    x000D   lt div id  readroot  style  display  none  gt  x000D     lt input type  button  value  Remove review  onclick  this parentNode parentNode removeChild this parentNode      gt  x000D     lt br   gt  x000D     lt br   gt  x000D     lt input name  cd  value  title    gt  x000D     lt select name  rankingsel  gt  x000D       lt option gt Rating lt  option gt  x000D       lt option value  excellent  gt Excellent lt  option gt  x000D       lt option value  good  gt Good lt  option gt  x000D       lt option value  ok  gt OK lt  option gt  x000D       lt option value  poor  gt Poor lt  option gt  x000D       lt option value  bad  gt Bad lt  option gt  x000D     lt  select gt  x000D     lt br   gt  x000D     lt br   gt  x000D     lt textarea rows  5  cols  20  name  review  gt Short review lt  textarea gt  x000D     lt br   gt Radio buttons included to test them in Explorer  x000D     lt br   gt  x000D     lt input type  radio  name  something  value  test1    gt Test 1 x000D     lt br   gt  x000D     lt input type  radio  name  something  value  test2    gt Test 2 lt  div gt  x000D   lt form method  post  action  index1 php  gt   lt span id  writeroot  gt  lt  span gt  x000D   x000D     lt input type  button  onclick  moreFields     id  moreFieldsButton  value  Give me more fields     gt  x000D     lt input type  submit  value  Send form    gt  x000D   lt  form gt  x000D   x000D   x000D

User · Answer

When I try    lt input type  button  id  moreFields  onclick  alert  The text will be show      return false   value  Give me more fields      gt    It s worked well  So I think the problem is position of moreFields   function  Ensure that function will be define before your input tag   Pls try    lt script type  text javascript  gt      function moreFields             alert  The text will be show           lt  script gt    lt input type  button  id  moreFields  onclick  moreFields    value  Give me more fields      gt    Hope it helped

User · Answer

You ve forgot to define an onclick attribute to do something when the button is clicked  so nothing happening is the correct execution  see below    lt input type  button  id  moreFields  onclick  moreFields    value  Give me more fields      gt                                       ----------------------

[javascript] onClick function of an input type="button" not working

Examples related to javascript

Examples related to php

Examples related to jquery

Examples related to html