how to move html content by html select with javascript

Issue

so here this is like my day 1 to write javascript code "as i mean implementing them into my html" i just kinda stucked for hours to do this

so basically i just have this registration form like on below

<div id="selaccount">
<select id = "accounttype"
<option id = "typeA">Firstname</option>
<option id = "typeB">Lastname</option>
<option id = "typeC">Email<option>
</select> 
</div>

<div id="regform">
<div id="formA">
<input type = "text" placeholder = "Firstname">
</div>
<div id="formB">
<input type = "text" placeholder = "Lastname">
</div>
<div id="formC">
<input type = "Text" placeholder = "Email">
</div>
</div>
</body>
<script src ="main.js"> </script>
</html>

and on my main.js file i've been trying to write down this code :

function optionselect() {
var A = document.getElementById("selaccount");

var selected = A.SelectedIndex;
if (selected = document.getElementById("typeA"){
$("#formA").appendTo("#regform");}
else if (selected = document.getElementById("typeB){
$("formB).appendTo("#regorm");}
}

and its just didnt show anything even the vscode cant show me the debugger,anyway thanks for any respond,i really appreciate it and sorry for bad english

Solution

You dont need to add elements to the form with .appendTo.They are already in. You may want to hide them with CSS display:none. An dispay them with JS display:block.

var<div id="selaccount" onClick="optionselect()">
  <select id="accounttype">
    <option value="typeA">Firstname</option>
    <option value="typeB">Lastname</option>
    <option value="typeC">Email
      <option>
  </select>
</div>

<div id="regform">
  <div id="formA" style="display:none">
    <input type="text" placeholder="Firstname">
  </div>
  <div id="formB" style="display:none">
    <input type="text" placeholder="Lastname">
  </div>
  <div id="formC" style="display:none">
    <input type="Text" placeholder="Email">
  </div>
</div>

<script>
  function optionselect() {

    var selected = document.getElementById("accounttype").value;

    var formA = document.getElementById("formA");
    var formB = document.getElementById("formB");
    var formC = document.getElementById("formC");
    formA.style = "display:none"
    formB.style = "display:none"
    formC.style = "display:none"

    if (selected === "typeA") {

      formA.style = 'display:block';

    } else if (selected === "typeB") {

      formB.style = 'display:block';

    } else if (selected === "typeC") {

      formC.style = 'display:block';

    }

  }
</script>

Answered By - Smollet777