Как переместить HTML-контент по HTML выберите с помощью JavaScript - PullRequest
0 голосов
/ 15 ноября 2018

так что это как мой первый день для написания кода javascript "как я имею в виду внедрение их в мой html". Я просто застрял на несколько часов, чтобы сделать это

, так что в основном у меня просто есть эта регистрационная форма, как наниже

<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>

и в моем файле main.js я пытался записать этот код:

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");}
}

, и он просто не показал ничего, даже vscode не может показать мнеотладчик, в любом случае спасибо за любой ответ, я действительно ценю это и извините за плохой английский

Ответы [ 4 ]

0 голосов
/ 15 ноября 2018

Вам не нужно добавлять элементы в форму с помощью .appendTo. Они уже включены. Вы можете скрыть их с помощью CSS display:none.Диспай их с 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>
0 голосов
/ 15 ноября 2018

Попробуйте, надеюсь, это сработает для вас.

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script>
        function optionselect() {
            var selected = $('#accounttype').val();
            $("#formA").hide();
            $("#formB").hide();
            $("#formC").hide();
            if (selected == "typeA") {
                $("#formA").show();
            }
            else if (selected == "typeB") {
                $("#formB").show();
            }
            else if (selected == "typeC") {
                $("#formC").show();
            }
        }
        $(document).ready(function () {
            optionselect();
            $('body').on('change', '#accounttype', function () {
                optionselect();
            });
        });
    </script>
</head>
<body>
    <div id="selaccount">
        <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">
            <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>
</html>
0 голосов
/ 15 ноября 2018

    function work(uid) {
        console.log(uid)
        var input_value = document.getElementById('uid').value;
        var output_value = "The username is " + input_value;
        document.getElementById('output_data').innerText = output_value;
    }
    <script src="wo.js"></script>
    <input type="text" name="uname" id="uid">
    <button type="submit" onclick="work(uid.value)">Submit</button>
    <p id="output_data"></p>
0 голосов
/ 15 ноября 2018

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="selaccount" onChange="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 = $("#accounttype").val();
    
     $("#formA").css('display','none');  
     $("#formB").css('display','none');  
     $("#formC").css('display','none');  
    
     if (selected == "typeA"){
     
     $("#formA").css('display','block');
     
     }else if (selected == "typeB"){
     
     $("#formB").css('display','block');
     
     }else if (selected == "typeC"){
     
     $("#formC").css('display','block');
     
     }
    
    }
</script>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...