Javascript - radio buttons onlick not working-CodePudding

I am stuck with a problem. I want to add call functions based on selection in radio button. But one of radio buttons doesn't work at all (not calling the function), other is not checked when clicked. Here is my code:

  function clearElement(element_id){
    document.getElementById(element_id).remove();
  }

  function createCheck(){
    if (!document.getElementById('check')){
      var btn = "<button onclick=\"checkData()\" id='check'>Check</button>";
      document.getElementById("added").innerHTML  = btn;
    }
  }


  function addElements(){
    var added0 = "<p>Choose the filling method:</p><br>";
    var added1 = "<input type=\"radio\" value='Auto' id='auto' name=\"auto_manual\">I have ID</input>";
    var added2 = "<input type=\"radio\" value='Manually' id='manual' name=\"auto_manual\"> Enter data manually</input><br>";
    var added3 = "<p>Identification Code</p><br><input type=text id='ID'><br>";
    var added4 = "<p>Enter your email address:</p><br><input type='email' id='mail' autocomplete=\"on\"></input><br>";
    var added5 = "<button onclick=\"fillIn()\">Continue</button>";
    document.body.innerHTML  = "<div id=\"added\">"   added0   added1   added2   added3   added4   added5   "</div>";
    var f0     = document.getElementById('auto');
    var f1     = document.getElementById('manual');
    f0.onclick = function() { createCheck();};
    f1.onclick = function() { clearSelect('check');};
  }

I want it to work the following way: if a user chooses "I have ID" option, the radio button is checked and the button "Check" will be created. If "Enter data manually", the button "Check" will disappear if exists.

Could you, please, help me with it?

Update (HTML):

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <title>Demo Web App</title>
  </head>
  <body>
    <h1>Template Creator Bot</h1> <br> <br>
    <script>
        ...
  </script>
  <div id='change'>
    <select name="docs" id="selectedTemplate">
      <option value="Order">Order</option>
      <option value="Complaint">Complaint</option>
      <option value="Other">Other</option>
    </select>
    <button onclick="addElements()">Next</button>
  </div>
  </body>
</html>

CodePudding user response：

It would be better if you made the button element once and just toggled its visibility on demand.

There are also better strategies to compose dynamic html on your DOM instead of using innerHTML like using <template> or creating elements with document.createElement().

By the way, addressing specifically your issue here, I made a demo that adds the button in the main addElements() routine, and two functions: showButton() and hideButton() that will be called by the click event handlers added to the two radio options.

addElements();
 
function showButton(){
  const target = document.getElementById('check');
  if (target.classList.contains('hide'))
    target.classList.remove('hide');
}

function hideButton(){
  const target = document.getElementById('check');
  if (!target.classList.contains('hide'))      
    document.getElementById('check').classList.add('hide');
}
 
function addElements(){

  var added0 = "<p>Choose the filling method:</p><br>";
  var added1 = "<input type='radio' value='Auto' id='auto' name='auto_manual'>I have ID</input>";
  var added2 = "<input type='radio' value='Manually' id='manual' name='auto_manual'>Enter data manually</input><br>";
  var added3 = "<p>Identification Code</p><br><input type=text id='ID'><br>";
  var added4 = "<p>Enter your email address:</p><br><input type='email' id='mail' autocomplete='on'></input><br>";
  var added5 = "<button onclick='fillIn()'>Continue</button>";

  var added6 = "<button class='hide' onclick='checkData()' id='check'>Check</button>";   

  document.body.innerHTML  =
    "<div id='added'>"   added0   added1   added2   added3   added4   added5   added6   "</div>";

  /*
  Here adding the click event listener for the two radio options..
  in the rest of your generated html you used the approach of defining handlers on html
  so it's not clear why here you opted to do it programmatically for the radio options..
  Anyway I only slightly changed the approach using addEventListener instead.
  */
  var f0     = document.getElementById('auto');
  var f1     = document.getElementById('manual');    
  f0.addEventListener('click', function() { showButton();});
  f1.addEventListener('click', function() { hideButton();});
}

.hide{
  display: none;
}

input[type=radio]{
  cursor: pointer;
}