javascript - 引用和替换包含循环的子模式

问题描述

该文档对保存子节点的方法有所了解。我需要使用引用的 oldChild，因为它将包含带有检查循环的数据字段，以输入可能需要编辑的对象。Mozilla 说要将 removeChild() 方法保存到一个变量中。

var oldChild = node.removeChild(child);

https://developer.mozilla.org/en-US/docs/Web/API/Node/removeChild

我想问题是我如何正确使用它？

如需更深入的参考：

<!DOCTYPE HTML>
<HTML>

<HEADER>
<script>
// Global Variables
var userInfo = {};
var general = {};
// ^^^^^^^


// page navigation

function gasTab(parent,start,personal,general,showInfo,reUser,oPersonal,oShowInfo){
var parent = document.getElementById("gasCalc");
var start = document.getElementById("start");
var personal = document.getElementById("personal");
var general = document.getElementById("general");
var showInfo = document.getElementById("showInfo");
var oPersonal;
var oGeneral;
var oShowInfo;
var reUser = 0;

document.getElementById("toGeneral").addEventListener("click", function(){
    if (reUser == 0){
        var oPersonal = parent.removeChild(personal);;
        general.style.display="block";
        return oPersonal;
    } else if (reUser == 1) {
        var oPersonal = parent.removeChild(personal);;
        parent.appendChild(oShowInfo);
        return oPersonal;
    } else {
        window.alert("Whoops this function is in progress");
    }
return oPersonal;
});

document.getElementById("finish").addEventListener("click", function(){
    if (reUser == 0){
        var oGeneral = parent.removeChild(general);;
        document.getElementById("showInfo").style.display="block";
        return reUser++;
    } else if (reUser == 1) {
        var oGeneral = parent.removeChild(general);;
        oGeneral;
        parent.appendChild(oShowInfo);
        var oGeneral = parent.removeChild(general);;
        oGeneral;
    } else {
        window.alert("Whoops this function is in progress");
    }

});

document.getElementsByClassName("toPersonal")[0].addEventListener("click", function(){var oShowInfo = 

parent.removeChild(showInfo);;  
parent.appendChild(personal);
return oShowInfo; });

document.getElementsByClassName("toGeneral")[0].addEventListener("click", function(){var oShowInfo = 

parent.removeChild(showInfo);;
oShowInfo;
parent.appendChild(oGeneral);
return oShowInfo; });
//^^^^^^^^

// begin gas calc

parent.removeChild(start);

document.getElementById("personal").style.display="block";

// ^^^^^^^^

// Form handling

 function inputObj0(formNR, defaultValues) { 
var inputs = formNR.getElementsByTagName('input');
 for ( var i = 0; i < inputs.length; i++) {
  userInfo[inputs[i].name] = userInfo[i];
   if(inputs[i].type === 'text' || inputs[i].type === 'password') {
          inputs[i].value = defaultValues[i];                            
          document.getElementById(inputs[i].name).innerHTML = defaultValues[i];
        }
        inputs[i].addEventListener('keyup', function() {
          userInfo[this.name] = this.value;
          document.getElementById(this.name).innerHTML = this.value;
        }, false);
      }
    }



     // build a little array with the defaultValues for each input
    var defValues =['FirstName','UserName','User',
                     'Pass','RPass'];
    // this will push all inputs from the given form in the userInfo object.
    inputObj0(document.forms[0], defValues);


//general tab
 function inputObj1(formNR, defaultValues1) { 
var inputs = formNR.getElementsByTagName('input');
 for (var i = 0; i < inputs.length; i++) {
  general[inputs[i].name] = defaultValues1[i];
   if(inputs[i].type === 'text' || inputs[i].type === 'number') {
          inputs[i].value = defaultValues1[i];                            
          document.getElementById(inputs[i].name).innerHTML = defaultValues1[i];
        }
        inputs[i].addEventListener('keyup', function() {
          general[this.name] = this.value;
          document.getElementById(this.name).innerHTML = this.value;
        }, false);
      }
    }
    var defValues1 =['vehicle','20','70.35',
                     '20'];
    // this will push all inputs from the given form in the General object.
    inputObj1(document.forms[1], defValues1);
};

</script>

</HEADER>

<BODY>

<DIV id="gasCalc">

<DIV id="start">

<p>Thank you for choosing gas calculator. Are you a new User, or an existing one?</p><br><br>

<BUTTON id="newUser" onclick="gasTab(personal);">New User</BUTTON><BR><BR>

<BUTTON id="load" onclick="load();">Existing user</button>

</DIV>

<DIV id="personal" style="display:none">
<P>We will collect a little information about you for storage and retrieval purposes.</P>

<form id="identify">
First Name:<br> <input type="text" name="firstname">
<br>
New Username:<br> <input type="text" name="user">
<br>
Password:<br> <input type="password" name="pass">
<br>
Repeat Password:<br><input type="password" name="rpass">

</form>

<BR><BR><button id="toGeneral">Submit</button>


</DIV> 

<DIV ID="general" style="display:none">
<p>input</p><BR>
<form id="fgeneral">
input<BR>
<input type="text" name="vehicle"><BR><BR>
input<BR>
<input type="number" required name="mpg" min="0" max="100.9" value="0" step=".1"><BR><BR>
input<BR>
$<input type="number" name="insurance" min="1" max="200" value="70" step=".01"><BR><BR>
input<BR>
$<input type="number" name="sanitation" min="1" max="200" value="70" step=".01"><BR><BR>

</Form>
<BR><BR><BR><BR><button id="finish">Submit</button>


</DIV>

<DIV ID="showInfo" STYLE="display:none">
<DIV ID="hud">
<button id="detail" class="toPersonal">
  <h2>User Info</h2>
  firstname = <span id="firstname"></span><br>
  user = <span id="user"></span><br>
  pass = <span id="pass"></span><br>
  rpass = <span id="rpass"></span><br><br>
</button>

<button id="detail" class="toGeneral">
<h3>General</h3>
vehicle = <span id="vehicle"></span><BR>
mpg = <span id="mpg"></span><BR>
insurance = <span id="insurance"></span><BR>
sanitation = <span id="sanitation"></span><BR>
</button>

</DIV>

</DIV>

</DIV>

</BODY>

</HTML>

标签： javascript

javascript - 引用和替换包含循环的子模式

问题描述

解决方案

推荐阅读