Javascript //获取“镜头选择”的选定选项索引 lensText=lensSel.options[lensList].text;//获取所选镜头元素选项的文本 if(lensList==1 | | lensList==2 | | lensList==3) { //将结果打印到结果表单中 //result.innerHTML+=“
您选择的镜头类型是:“+lensText+””;Javascript //获取“镜头选择”的选定选项索引 lensText=lensSel.options[lensList].text;//获取所选镜头元素选项的文本 if(lensList==1 | | lensList==2 | | lensList==3) { //将结果打印到结果表单中 //result.innerHTML+=“,javascript,html,dom,appendchild,textnode,Javascript,Html,Dom,Appendchild,Textnode,您选择的镜头类型是:“+lensText+””; <div id="selForm"> <form id="budgetForm"> <!--show a large print of green font color and size money--> Select your DSLR budget range: <s
<div id="selForm">
<form id="budgetForm">
<!--show a large print of green font color and size money-->
Select your DSLR budget range:
<select id="budgetSel" onChange="onChange();">
<!--<option value="selectOneBudget" onMouseOver="changeBackgroundImageSelectOne(this);" selected="selected">Select one</option>
<option id="hover500" value="fiveHundredDollars" onMouseOver="changeBackgroundImage500(this);">< $500</option>
<option id="hover1000" value="thousandDollars" onMouseOver="changeBackgroundImage1000(this);">< $1000</option>-->
</select>
</form>
<form id="brandForm">
<!--Show images of the company one by one (fade in, fade out)-->
Select the DSLR brand you want:
<select id="brandSel" onChange="onChange();">
<!--<option onMouseOver="changeBackgroundImageSelectOne(this);" value="selectOneBrand" selected="selected">Select one</option>
<option id="hoverCanon" onMouseOver="changeBackgroundImageCanon(this);" value="Canon">Canon</option>
<option id="hoverNikon" onMouseOver="changeBackgroundImageNikon(this);" value="Nikon">Nikon</option>
<option id="hoverSony" onMouseOver="changeBackgroundImageSony(this);" value="Sony">Sony</option>
<option id="hoverPentax" onMouseOver="changeBackgroundImagePentax(this);" value="Pentax">Pentax</option>-->
</select>
</form>
<form id="typeForm">
<!--Show stunning beautiful pictures of each type of photography-->
<!--Select multiples by click CTRL + Left-Click on mouse.-->
Select the type of photography you plan on doing with a DSLR:
<select id="typeSel" onChange="onChange();">
<!--<option onMouseOver="changeBackgroundImageSelectOne(this);" value="selectOneType" selected="selected">Select one</option>
<option id="hoverLandscape" onMouseOver="changeBackgroundImageLandscape(this);" value="Landscape">Landscape</option>
<option id="hoverWildlife" onMouseOver="changeBackgroundImageWildlife(this);" value="WildLife">Wildlife</option>
<option id="hoverAerial" onMouseOver="changeBackgroundImageAerial(this);" value="Aerial">Aerial</option>
<option id="hoverSports" onMouseOver="changeBackgroundImageSports(this);" value="Sports">Sports</option>
<option id="hoverPortrait" onMouseOver="changeBackgroundImagePortrait(this);" value="Portrait">Portrait</option>
<option id="hoverArchitectural" onMouseOver="changeBackgroundImageArchitectural(this);" value="Architectural">Architectural</option>
<option id="hoverMacro" onMouseOver="changeBackgroundImageMacro(this);" value="Macro">Macro</option>-->
</select>
</form>
<form id="lensForm">
Select the type of lenses you want:
<select id="lensSel" onChange="onChange();">
<!--<option onMouseOver="changeBackgroundImageSelectOne(this);" value="selectOneLens" selected="selected">Select one</option>
<option id="hoverPortraitL" onMouseOver="changeBackgroundImagePortraitL(this);" value="portraitLens">Normal “Portrait” Lens / 35-50mm</option>
<option id="hoverTelephoto" onMouseOver="changeBackgroundImageTelephoto(this);" value="telephotoLens">Telephoto Zoom Lens / > 200mm</option>
<option id="hoverWide" onMouseOver="changeBackgroundImageWide(this);" value="wideAngleLens">Ultra-Wide Angle Lens / < 35mm</option>-->
</select>
</form>
</div>
<div id="resultForm">
<h1>Your DSLR Selections...</h1>
<form id="result" onsubmit="true">
<!--Store User Selection Text Node Element Here-->
<!--<p>Your DSLR budget range selected was:</p>
<p>The DSLR brand you selected was:</p>
<p>The type of photography you selected was:</p>
<p>The type of lenses you selected was:</p>
<input type="submit" value="Confirm Purchase"/>
<input type="button" value="Reset All"/>-->
</form>
</div>
</div>
</body>
//显示打印的结果
//创建节点
<div id="selForm">
<form id="budgetForm">
<!--show a large print of green font color and size money-->
Select your DSLR budget range:
<select id="budgetSel" onChange="onChange();">
<!--<option value="selectOneBudget" onMouseOver="changeBackgroundImageSelectOne(this);" selected="selected">Select one</option>
<option id="hover500" value="fiveHundredDollars" onMouseOver="changeBackgroundImage500(this);">< $500</option>
<option id="hover1000" value="thousandDollars" onMouseOver="changeBackgroundImage1000(this);">< $1000</option>-->
</select>
</form>
<form id="brandForm">
<!--Show images of the company one by one (fade in, fade out)-->
Select the DSLR brand you want:
<select id="brandSel" onChange="onChange();">
<!--<option onMouseOver="changeBackgroundImageSelectOne(this);" value="selectOneBrand" selected="selected">Select one</option>
<option id="hoverCanon" onMouseOver="changeBackgroundImageCanon(this);" value="Canon">Canon</option>
<option id="hoverNikon" onMouseOver="changeBackgroundImageNikon(this);" value="Nikon">Nikon</option>
<option id="hoverSony" onMouseOver="changeBackgroundImageSony(this);" value="Sony">Sony</option>
<option id="hoverPentax" onMouseOver="changeBackgroundImagePentax(this);" value="Pentax">Pentax</option>-->
</select>
</form>
<form id="typeForm">
<!--Show stunning beautiful pictures of each type of photography-->
<!--Select multiples by click CTRL + Left-Click on mouse.-->
Select the type of photography you plan on doing with a DSLR:
<select id="typeSel" onChange="onChange();">
<!--<option onMouseOver="changeBackgroundImageSelectOne(this);" value="selectOneType" selected="selected">Select one</option>
<option id="hoverLandscape" onMouseOver="changeBackgroundImageLandscape(this);" value="Landscape">Landscape</option>
<option id="hoverWildlife" onMouseOver="changeBackgroundImageWildlife(this);" value="WildLife">Wildlife</option>
<option id="hoverAerial" onMouseOver="changeBackgroundImageAerial(this);" value="Aerial">Aerial</option>
<option id="hoverSports" onMouseOver="changeBackgroundImageSports(this);" value="Sports">Sports</option>
<option id="hoverPortrait" onMouseOver="changeBackgroundImagePortrait(this);" value="Portrait">Portrait</option>
<option id="hoverArchitectural" onMouseOver="changeBackgroundImageArchitectural(this);" value="Architectural">Architectural</option>
<option id="hoverMacro" onMouseOver="changeBackgroundImageMacro(this);" value="Macro">Macro</option>-->
</select>
</form>
<form id="lensForm">
Select the type of lenses you want:
<select id="lensSel" onChange="onChange();">
<!--<option onMouseOver="changeBackgroundImageSelectOne(this);" value="selectOneLens" selected="selected">Select one</option>
<option id="hoverPortraitL" onMouseOver="changeBackgroundImagePortraitL(this);" value="portraitLens">Normal “Portrait” Lens / 35-50mm</option>
<option id="hoverTelephoto" onMouseOver="changeBackgroundImageTelephoto(this);" value="telephotoLens">Telephoto Zoom Lens / > 200mm</option>
<option id="hoverWide" onMouseOver="changeBackgroundImageWide(this);" value="wideAngleLens">Ultra-Wide Angle Lens / < 35mm</option>-->
</select>
</form>
</div>
<div id="resultForm">
<h1>Your DSLR Selections...</h1>
<form id="result" onsubmit="true">
<!--Store User Selection Text Node Element Here-->
<!--<p>Your DSLR budget range selected was:</p>
<p>The DSLR brand you selected was:</p>
<p>The type of photography you selected was:</p>
<p>The type of lenses you selected was:</p>
<input type="submit" value="Confirm Purchase"/>
<input type="button" value="Reset All"/>-->
</form>
</div>
</div>
</body>
//var pNodeBudget,pNodeBrand,pNode
//var linebreak=document.createElement(“br”);
//检测进行了多少次更改
if(iterationCount==未定义)//在第一次启动时使用
{
iterationCount=0;//将值设置为0
}
//iterationCount>0(在第二次或多次尝试时),允许删除pNodes的权限
如果(迭代计数>0)
{
pNodeBudget.removeChild(pTextBudget);
pNodeBrand.removeChild(pTextBrand);
pNodeType.removeChild(pTextType);
pNodeLens.removeChild(pTextLens);
迭代--;//在删除pnode之后将其放回0。
}
//迭代计数==0(首次尝试),允许创建文本节点
如果(迭代计数==0)
{
var pNodeBudget=document.createElement(“p”);
var pNodeBrand=document.createElement(“p”);
var pNodeType=document.createElement(“p”);
var pNodeLens=document.createElement(“p”);
风险值pTextBudget、pTextBrand、pTextType、pTextLens;
pTextBudget=document.createTextNode(“您选择的DSLR预算范围为:“+budText”);
//linebreak.appendChild(pTextBudget);
pTextBrand=document.createTextNode(“您选择的DSLR品牌为:“+brandText”);
//linebreak.appendChild(pTextBrand);
pTextType=document.createTextNode(“您选择的摄影类型为:“+typeText”);
//linebreak.appendChild(pTextType);
pTextLens=document.createTextNode(“您选择的镜头类型为:“+lensText”);
//linebreak.appendChild(pTextLens);
//将文本附加到段落
pNodeBudget.appendChild(pTextBudget);
pNodeBrand.appendChild(pTextBrand);
pNodeType.appendChild(pTextType);
pNodeLens.appendChild(pTextLens);
//删除PNODE并再次追加更改
//附加到文档页
结果:appendChild(pNodeBudget);
结果:appendChild(pNodeBrand);
结果:appendChild(pNodeType);
结果:阑尾炎(pNodeLens);
resultForm=document.getElementById(“resultForm”).style.display=“block”;
iterationCount++;//1递增一次后,执行不同的操作
}
}
}
}
}
HTML代码:
var result;
var budSel, budList, budText;
var brandSel, brandList, brandText;
var typeSel, typeList, typeText;
var lensSel, lensList, lensText;
var brandForm, typeForm, lensForm;
var iterationCount;
function DSLRinit()
{
// set Select value to Select one onload() page
var setSelect = document.getElementById("budgetSel").selectedIndex = "0";
setSelect = document.getElementById("brandSel").selectedIndex = "0";
setSelect = document.getElementById("typeSel").selectedIndex = "0";
setSelect = document.getElementById("lensSel").selectedIndex = "0";
brandForm = document.getElementById("brandForm").style.display = "none";
typeForm = document.getElementById("typeForm").style.display = "none";
lensForm = document.getElementById("lensForm").style.display = "none";
var resultForm = document.getElementById("resultForm").style.display = "none";
// dynamically create the select options onload()
budSel = document.getElementById("budgetSel");
budSel.options[0] = new Option("Select One");
budSel.options[1] = new Option("< $500");
budSel.options[2] = new Option("< $1000");
brandSel = document.getElementById("brandSel");
brandSel.options[0] = new Option("Select One");
brandSel.options[1] = new Option("Canon");
brandSel.options[2] = new Option("Nikon");
brandSel.options[3] = new Option("Sony");
brandSel.options[4] = new Option("Pentax");
typeSel = document.getElementById("typeSel");
typeSel.options[0] = new Option("Select One");
typeSel.options[1] = new Option("Wildlife");
typeSel.options[2] = new Option("Aerial");
typeSel.options[3] = new Option("Sports");
typeSel.options[4] = new Option("Portrait");
typeSel.options[5] = new Option("Architectural");
typeSel.options[6] = new Option("Macro");
lensSel = document.getElementById("lensSel");
lensSel.options[0] = new Option("Select One");
lensSel.options[1] = new Option("Normal \"Portrait\" Lens / 35-50mm");
lensSel.options[2] = new Option("Telephoto Zoom Lens / > 200mm");
lensSel.options[3] = new Option("Ultra-Wide Angle Lens / < 35mm");
}
// function to dynamically change user selected options
function onChange()
{
result = document.getElementById("result"); // get the <form> element id
budgetForm = document.getElementById("budgetForm").style.display = "block";
budSel = document.getElementById("budgetSel"); // get the budget <select>
budList = budSel.options.selectedIndex; // get the selected option index of budget select
budText = budSel.options[budList].text; // get the text of the selected option of budget element
if(budList == 1 || budList == 2)
{
// print the results into the result form
//result.innerHTML = "<p>Your DSLR budget range selected was: " + budText + "</p>";
//result.appendChild(result);
brandForm = document.getElementById("brandForm").style.display = "block";
//brandForm = document.getElementById("brandForm").style.margin = "-100px";
brandSel = document.getElementById("brandSel"); // get the brand <select>
brandList = brandSel.options.selectedIndex; // get the selected option index of brand select
brandText = brandSel.options[brandList].text; // get the text of the selected option of brand element
if(brandList == 1 || brandList == 2 || brandList == 3 || brandList == 4)
{
// print the results into the result form
//result.innerHTML += "<p>The DSLR brand you selected was: " + brandText + "</p>";
typeForm = document.getElementById("typeForm").style.display = "block";
typeSel = document.getElementById("typeSel"); // get the type <select>
typeList = typeSel.options.selectedIndex; // get the selected option index of type select
typeText = typeSel.options[typeList].text; // get the text of the selected option of type element
if(typeList == 1 || typeList == 2 || typeList == 3 || typeList == 4 || typeList == 5 || typeList == 6 || typeList == 7)
{
// print the results into the result form
//result.innerHTML += "<p>The type of photography you selected was: " + typeText + "</p>";
//result.
lensForm = document.getElementById("lensForm").style.display = "block";
lensSel = document.getElementById("lensSel"); // get the lens <select>
lensList = lensSel.options.selectedIndex; // get the selected option index of lens select
lensText = lensSel.options[lensList].text; // get the text of the selected option of lens element
if(lensList == 1 || lensList == 2 || lensList == 3)
{
// print the results into the result form
//result.innerHTML += "<p>The type of lenses you selected was: " + lensText + "</p>";
// display the printed results
// create <p></p> node
//var pNodeBudget, pNodeBrand, pNode
//var linebreak = document.createElement("br");
// detect how many times changes were being made
if(iterationCount === undefined) // used on first launch
{
iterationCount = 0; // set the value to 0
}
//iterationCount > 0 (on second or more tries), allow permission to remove the pNodes
if(iterationCount > 0)
{
pNodeBudget.removeChild(pTextBudget);
pNodeBrand.removeChild(pTextBrand);
pNodeType.removeChild(pTextType);
pNodeLens.removeChild(pTextLens);
iteration--; // put it back to 0 right after removing the pNodes.
}
// iteration Count == 0 (first try), allow create text node
if(iterationCount == 0)
{
var pNodeBudget = document.createElement("p");
var pNodeBrand = document.createElement("p");
var pNodeType = document.createElement("p");
var pNodeLens = document.createElement("p");
var pTextBudget, pTextBrand, pTextType, pTextLens;
pTextBudget = document.createTextNode("Your DSLR budget range selected was: " + budText);
//linebreak.appendChild(pTextBudget);
pTextBrand = document.createTextNode("The DSLR brand you selected was: " + brandText);
//linebreak.appendChild(pTextBrand);
pTextType = document.createTextNode("The type of photography you selected was: " + typeText);
//linebreak.appendChild(pTextType);
pTextLens = document.createTextNode("The type of lenses you selected was: " + lensText);
//linebreak.appendChild(pTextLens);
// append text to paragraph
pNodeBudget.appendChild(pTextBudget);
pNodeBrand.appendChild(pTextBrand);
pNodeType.appendChild(pTextType);
pNodeLens.appendChild(pTextLens);
// remove pNodes and append changes again
// append to document page
result.appendChild(pNodeBudget);
result.appendChild(pNodeBrand);
result.appendChild(pNodeType);
result.appendChild(pNodeLens);
resultForm = document.getElementById("resultForm").style.display = "block";
iterationCount++; // 1 increment after one time, do something different
}
}
}
}
}
<div id="selForm">
<form id="budgetForm">
<!--show a large print of green font color and size money-->
Select your DSLR budget range:
<select id="budgetSel" onChange="onChange();">
<!--<option value="selectOneBudget" onMouseOver="changeBackgroundImageSelectOne(this);" selected="selected">Select one</option>
<option id="hover500" value="fiveHundredDollars" onMouseOver="changeBackgroundImage500(this);">< $500</option>
<option id="hover1000" value="thousandDollars" onMouseOver="changeBackgroundImage1000(this);">< $1000</option>-->
</select>
</form>
<form id="brandForm">
<!--Show images of the company one by one (fade in, fade out)-->
Select the DSLR brand you want:
<select id="brandSel" onChange="onChange();">
<!--<option onMouseOver="changeBackgroundImageSelectOne(this);" value="selectOneBrand" selected="selected">Select one</option>
<option id="hoverCanon" onMouseOver="changeBackgroundImageCanon(this);" value="Canon">Canon</option>
<option id="hoverNikon" onMouseOver="changeBackgroundImageNikon(this);" value="Nikon">Nikon</option>
<option id="hoverSony" onMouseOver="changeBackgroundImageSony(this);" value="Sony">Sony</option>
<option id="hoverPentax" onMouseOver="changeBackgroundImagePentax(this);" value="Pentax">Pentax</option>-->
</select>
</form>
<form id="typeForm">
<!--Show stunning beautiful pictures of each type of photography-->
<!--Select multiples by click CTRL + Left-Click on mouse.-->
Select the type of photography you plan on doing with a DSLR:
<select id="typeSel" onChange="onChange();">
<!--<option onMouseOver="changeBackgroundImageSelectOne(this);" value="selectOneType" selected="selected">Select one</option>
<option id="hoverLandscape" onMouseOver="changeBackgroundImageLandscape(this);" value="Landscape">Landscape</option>
<option id="hoverWildlife" onMouseOver="changeBackgroundImageWildlife(this);" value="WildLife">Wildlife</option>
<option id="hoverAerial" onMouseOver="changeBackgroundImageAerial(this);" value="Aerial">Aerial</option>
<option id="hoverSports" onMouseOver="changeBackgroundImageSports(this);" value="Sports">Sports</option>
<option id="hoverPortrait" onMouseOver="changeBackgroundImagePortrait(this);" value="Portrait">Portrait</option>
<option id="hoverArchitectural" onMouseOver="changeBackgroundImageArchitectural(this);" value="Architectural">Architectural</option>
<option id="hoverMacro" onMouseOver="changeBackgroundImageMacro(this);" value="Macro">Macro</option>-->
</select>
</form>
<form id="lensForm">
Select the type of lenses you want:
<select id="lensSel" onChange="onChange();">
<!--<option onMouseOver="changeBackgroundImageSelectOne(this);" value="selectOneLens" selected="selected">Select one</option>
<option id="hoverPortraitL" onMouseOver="changeBackgroundImagePortraitL(this);" value="portraitLens">Normal “Portrait” Lens / 35-50mm</option>
<option id="hoverTelephoto" onMouseOver="changeBackgroundImageTelephoto(this);" value="telephotoLens">Telephoto Zoom Lens / > 200mm</option>
<option id="hoverWide" onMouseOver="changeBackgroundImageWide(this);" value="wideAngleLens">Ultra-Wide Angle Lens / < 35mm</option>-->
</select>
</form>
</div>
<div id="resultForm">
<h1>Your DSLR Selections...</h1>
<form id="result" onsubmit="true">
<!--Store User Selection Text Node Element Here-->
<!--<p>Your DSLR budget range selected was:</p>
<p>The DSLR brand you selected was:</p>
<p>The type of photography you selected was:</p>
<p>The type of lenses you selected was:</p>
<input type="submit" value="Confirm Purchase"/>
<input type="button" value="Reset All"/>-->
</form>
</div>
</div>
</body>
最佳单反选择。。。
<div id="selForm">
<form id="budgetForm">
<!--show a large print of green font color and size money-->
Select your DSLR budget range:
<select id="budgetSel" onChange="onChange();">
<!--<option value="selectOneBudget" onMouseOver="changeBackgroundImageSelectOne(this);" selected="selected">Select one</option>
<option id="hover500" value="fiveHundredDollars" onMouseOver="changeBackgroundImage500(this);">< $500</option>
<option id="hover1000" value="thousandDollars" onMouseOver="changeBackgroundImage1000(this);">< $1000</option>-->
</select>
</form>
<form id="brandForm">
<!--Show images of the company one by one (fade in, fade out)-->
Select the DSLR brand you want:
<select id="brandSel" onChange="onChange();">
<!--<option onMouseOver="changeBackgroundImageSelectOne(this);" value="selectOneBrand" selected="selected">Select one</option>
<option id="hoverCanon" onMouseOver="changeBackgroundImageCanon(this);" value="Canon">Canon</option>
<option id="hoverNikon" onMouseOver="changeBackgroundImageNikon(this);" value="Nikon">Nikon</option>
<option id="hoverSony" onMouseOver="changeBackgroundImageSony(this);" value="Sony">Sony</option>
<option id="hoverPentax" onMouseOver="changeBackgroundImagePentax(this);" value="Pentax">Pentax</option>-->
</select>
</form>
<form id="typeForm">
<!--Show stunning beautiful pictures of each type of photography-->
<!--Select multiples by click CTRL + Left-Click on mouse.-->
Select the type of photography you plan on doing with a DSLR:
<select id="typeSel" onChange="onChange();">
<!--<option onMouseOver="changeBackgroundImageSelectOne(this);" value="selectOneType" selected="selected">Select one</option>
<option id="hoverLandscape" onMouseOver="changeBackgroundImageLandscape(this);" value="Landscape">Landscape</option>
<option id="hoverWildlife" onMouseOver="changeBackgroundImageWildlife(this);" value="WildLife">Wildlife</option>
<option id="hoverAerial" onMouseOver="changeBackgroundImageAerial(this);" value="Aerial">Aerial</option>
<option id="hoverSports" onMouseOver="changeBackgroundImageSports(this);" value="Sports">Sports</option>
<option id="hoverPortrait" onMouseOver="changeBackgroundImagePortrait(this);" value="Portrait">Portrait</option>
<option id="hoverArchitectural" onMouseOver="changeBackgroundImageArchitectural(this);" value="Architectural">Architectural</option>
<option id="hoverMacro" onMouseOver="changeBackgroundImageMacro(this);" value="Macro">Macro</option>-->
</select>
</form>
<form id="lensForm">
Select the type of lenses you want:
<select id="lensSel" onChange="onChange();">
<!--<option onMouseOver="changeBackgroundImageSelectOne(this);" value="selectOneLens" selected="selected">Select one</option>
<option id="hoverPortraitL" onMouseOver="changeBackgroundImagePortraitL(this);" value="portraitLens">Normal “Portrait” Lens / 35-50mm</option>
<option id="hoverTelephoto" onMouseOver="changeBackgroundImageTelephoto(this);" value="telephotoLens">Telephoto Zoom Lens / > 200mm</option>
<option id="hoverWide" onMouseOver="changeBackgroundImageWide(this);" value="wideAngleLens">Ultra-Wide Angle Lens / < 35mm</option>-->
</select>
</form>
</div>
<div id="resultForm">
<h1>Your DSLR Selections...</h1>
<form id="result" onsubmit="true">
<!--Store User Selection Text Node Element Here-->
<!--<p>Your DSLR budget range selected was:</p>
<p>The DSLR brand you selected was:</p>
<p>The type of photography you selected was:</p>
<p>The type of lenses you selected was:</p>
<input type="submit" value="Confirm Purchase"/>
<input type="button" value="Reset All"/>-->
</form>
</div>
</div>
</body>
选择您的DSLR预算范围:
选择所需的DSLR品牌:
选择您计划使用DSLR进行的摄影类型:
选择所需的镜头类型:
您的单反选择。。。
仍然很难说出你在问什么。如果您发布了大量代码,请将注意力转移到您所询问的代码块中的特定代码行
<div id="selForm">
<form id="budgetForm">
<!--show a large print of green font color and size money-->
Select your DSLR budget range:
<select id="budgetSel" onChange="onChange();">
<!--<option value="selectOneBudget" onMouseOver="changeBackgroundImageSelectOne(this);" selected="selected">Select one</option>
<option id="hover500" value="fiveHundredDollars" onMouseOver="changeBackgroundImage500(this);">< $500</option>
<option id="hover1000" value="thousandDollars" onMouseOver="changeBackgroundImage1000(this);">< $1000</option>-->
</select>
</form>
<form id="brandForm">
<!--Show images of the company one by one (fade in, fade out)-->
Select the DSLR brand you want:
<select id="brandSel" onChange="onChange();">
<!--<option onMouseOver="changeBackgroundImageSelectOne(this);" value="selectOneBrand" selected="selected">Select one</option>
<option id="hoverCanon" onMouseOver="changeBackgroundImageCanon(this);" value="Canon">Canon</option>
<option id="hoverNikon" onMouseOver="changeBackgroundImageNikon(this);" value="Nikon">Nikon</option>
<option id="hoverSony" onMouseOver="changeBackgroundImageSony(this);" value="Sony">Sony</option>
<option id="hoverPentax" onMouseOver="changeBackgroundImagePentax(this);" value="Pentax">Pentax</option>-->
</select>
</form>
<form id="typeForm">
<!--Show stunning beautiful pictures of each type of photography-->
<!--Select multiples by click CTRL + Left-Click on mouse.-->
Select the type of photography you plan on doing with a DSLR:
<select id="typeSel" onChange="onChange();">
<!--<option onMouseOver="changeBackgroundImageSelectOne(this);" value="selectOneType" selected="selected">Select one</option>
<option id="hoverLandscape" onMouseOver="changeBackgroundImageLandscape(this);" value="Landscape">Landscape</option>
<option id="hoverWildlife" onMouseOver="changeBackgroundImageWildlife(this);" value="WildLife">Wildlife</option>
<option id="hoverAerial" onMouseOver="changeBackgroundImageAerial(this);" value="Aerial">Aerial</option>
<option id="hoverSports" onMouseOver="changeBackgroundImageSports(this);" value="Sports">Sports</option>
<option id="hoverPortrait" onMouseOver="changeBackgroundImagePortrait(this);" value="Portrait">Portrait</option>
<option id="hoverArchitectural" onMouseOver="changeBackgroundImageArchitectural(this);" value="Architectural">Architectural</option>
<option id="hoverMacro" onMouseOver="changeBackgroundImageMacro(this);" value="Macro">Macro</option>-->
</select>
</form>
<form id="lensForm">
Select the type of lenses you want:
<select id="lensSel" onChange="onChange();">
<!--<option onMouseOver="changeBackgroundImageSelectOne(this);" value="selectOneLens" selected="selected">Select one</option>
<option id="hoverPortraitL" onMouseOver="changeBackgroundImagePortraitL(this);" value="portraitLens">Normal “Portrait” Lens / 35-50mm</option>
<option id="hoverTelephoto" onMouseOver="changeBackgroundImageTelephoto(this);" value="telephotoLens">Telephoto Zoom Lens / > 200mm</option>
<option id="hoverWide" onMouseOver="changeBackgroundImageWide(this);" value="wideAngleLens">Ultra-Wide Angle Lens / < 35mm</option>-->
</select>
</form>
</div>
<div id="resultForm">
<h1>Your DSLR Selections...</h1>
<form id="result" onsubmit="true">
<!--Store User Selection Text Node Element Here-->
<!--<p>Your DSLR budget range selected was:</p>
<p>The DSLR brand you selected was:</p>
<p>The type of photography you selected was:</p>
<p>The type of lenses you selected was:</p>
<input type="submit" value="Confirm Purchase"/>
<input type="button" value="Reset All"/>-->
</form>
</div>
</div>
</body>
我的猜测是,当您在这段代码中创建文本节点时:
<div id="selForm">
<form id="budgetForm">
<!--show a large print of green font color and size money-->
Select your DSLR budget range:
<select id="budgetSel" onChange="onChange();">
<!--<option value="selectOneBudget" onMouseOver="changeBackgroundImageSelectOne(this);" selected="selected">Select one</option>
<option id="hover500" value="fiveHundredDollars" onMouseOver="changeBackgroundImage500(this);">< $500</option>
<option id="hover1000" value="thousandDollars" onMouseOver="changeBackgroundImage1000(this);">< $1000</option>-->
</select>
</form>
<form id="brandForm">
<!--Show images of the company one by one (fade in, fade out)-->
Select the DSLR brand you want:
<select id="brandSel" onChange="onChange();">
<!--<option onMouseOver="changeBackgroundImageSelectOne(this);" value="selectOneBrand" selected="selected">Select one</option>
<option id="hoverCanon" onMouseOver="changeBackgroundImageCanon(this);" value="Canon">Canon</option>
<option id="hoverNikon" onMouseOver="changeBackgroundImageNikon(this);" value="Nikon">Nikon</option>
<option id="hoverSony" onMouseOver="changeBackgroundImageSony(this);" value="Sony">Sony</option>
<option id="hoverPentax" onMouseOver="changeBackgroundImagePentax(this);" value="Pentax">Pentax</option>-->
</select>
</form>
<form id="typeForm">
<!--Show stunning beautiful pictures of each type of photography-->
<!--Select multiples by click CTRL + Left-Click on mouse.-->
Select the type of photography you plan on doing with a DSLR:
<select id="typeSel" onChange="onChange();">
<!--<option onMouseOver="changeBackgroundImageSelectOne(this);" value="selectOneType" selected="selected">Select one</option>
<option id="hoverLandscape" onMouseOver="changeBackgroundImageLandscape(this);" value="Landscape">Landscape</option>
<option id="hoverWildlife" onMouseOver="changeBackgroundImageWildlife(this);" value="WildLife">Wildlife</option>
<option id="hoverAerial" onMouseOver="changeBackgroundImageAerial(this);" value="Aerial">Aerial</option>
<option id="hoverSports" onMouseOver="changeBackgroundImageSports(this);" value="Sports">Sports</option>
<option id="hoverPortrait" onMouseOver="changeBackgroundImagePortrait(this);" value="Portrait">Portrait</option>
<option id="hoverArchitectural" onMouseOver="changeBackgroundImageArchitectural(this);" value="Architectural">Architectural</option>
<option id="hoverMacro" onMouseOver="changeBackgroundImageMacro(this);" value="Macro">Macro</option>-->
</select>
</form>
<form id="lensForm">
Select the type of lenses you want:
<select id="lensSel" onChange="onChange();">
<!--<option onMouseOver="changeBackgroundImageSelectOne(this);" value="selectOneLens" selected="selected">Select one</option>
<option id="hoverPortraitL" onMouseOver="changeBackgroundImagePortraitL(this);" value="portraitLens">Normal “Portrait” Lens / 35-50mm</option>
<option id="hoverTelephoto" onMouseOver="changeBackgroundImageTelephoto(this);" value="telephotoLens">Telephoto Zoom Lens / > 200mm</option>
<option id="hoverWide" onMouseOver="changeBackgroundImageWide(this);" value="wideAngleLens">Ultra-Wide Angle Lens / < 35mm</option>-->
</select>
</form>
</div>
<div id="resultForm">
<h1>Your DSLR Selections...</h1>
<form id="result" onsubmit="true">
<!--Store User Selection Text Node Element Here-->
<!--<p>Your DSLR budget range selected was:</p>
<p>The DSLR brand you selected was:</p>
<p>The type of photography you selected was:</p>
<p>The type of lenses you selected was:</p>
<input type="submit" value="Confirm Purchase"/>
<input type="button" value="Reset All"/>-->
</form>
</div>
</div>
</body>
var pTextBudget, pTextBrand, pTextType, pTextLens;
pTextBudget = document.createTextNode("Your DSLR budget range selected was: " + budText);
//linebreak.appendChild(pTextBudget);
pTextBrand = document.createTextNode("The DSLR brand you selected was: " + brandText);
//linebreak.appendChild(pTextBrand);
pTextType = document.createTextNode("The type of photography you selected was: " + typeText);
//linebreak.appendChild(pTextType);
pTextLens = document.createTextNode("The type of lenses you selected was: " + lensText);
//linebreak.appendChild(pTextLens);
// append text to paragraph
pNodeBudget.appendChild(pTextBudget);
pNodeBrand.appendChild(pTextBrand);
pNodeType.appendChild(pTextType);
pNodeLens.appendChild(pTextLens);
// remove pNodes and append changes again
您正在将文本节点指定给局部变量。这些变量仅在此函数期间存在。在下次调用此函数之前,它们不会保留其值。如果需要它们保留其值,那么应该将这些变量声明为全局变量(在函数外部),而不是在函数内部声明它们
<div id="selForm">
<form id="budgetForm">
<!--show a large print of green font color and size money-->
Select your DSLR budget range:
<select id="budgetSel" onChange="onChange();">
<!--<option value="selectOneBudget" onMouseOver="changeBackgroundImageSelectOne(this);" selected="selected">Select one</option>
<option id="hover500" value="fiveHundredDollars" onMouseOver="changeBackgroundImage500(this);">< $500</option>
<option id="hover1000" value="thousandDollars" onMouseOver="changeBackgroundImage1000(this);">< $1000</option>-->
</select>
</form>
<form id="brandForm">
<!--Show images of the company one by one (fade in, fade out)-->
Select the DSLR brand you want:
<select id="brandSel" onChange="onChange();">
<!--<option onMouseOver="changeBackgroundImageSelectOne(this);" value="selectOneBrand" selected="selected">Select one</option>
<option id="hoverCanon" onMouseOver="changeBackgroundImageCanon(this);" value="Canon">Canon</option>
<option id="hoverNikon" onMouseOver="changeBackgroundImageNikon(this);" value="Nikon">Nikon</option>
<option id="hoverSony" onMouseOver="changeBackgroundImageSony(this);" value="Sony">Sony</option>
<option id="hoverPentax" onMouseOver="changeBackgroundImagePentax(this);" value="Pentax">Pentax</option>-->
</select>
</form>
<form id="typeForm">
<!--Show stunning beautiful pictures of each type of photography-->
<!--Select multiples by click CTRL + Left-Click on mouse.-->
Select the type of photography you plan on doing with a DSLR:
<select id="typeSel" onChange="onChange();">
<!--<option onMouseOver="changeBackgroundImageSelectOne(this);" value="selectOneType" selected="selected">Select one</option>
<option id="hoverLandscape" onMouseOver="changeBackgroundImageLandscape(this);" value="Landscape">Landscape</option>
<option id="hoverWildlife" onMouseOver="changeBackgroundImageWildlife(this);" value="WildLife">Wildlife</option>
<option id="hoverAerial" onMouseOver="changeBackgroundImageAerial(this);" value="Aerial">Aerial</option>
<option id="hoverSports" onMouseOver="changeBackgroundImageSports(this);" value="Sports">Sports</option>
<option id="hoverPortrait" onMouseOver="changeBackgroundImagePortrait(this);" value="Portrait">Portrait</option>
<option id="hoverArchitectural" onMouseOver="changeBackgroundImageArchitectural(this);" value="Architectural">Architectural</option>
<option id="hoverMacro" onMouseOver="changeBackgroundImageMacro(this);" value="Macro">Macro</option>-->
</select>
</form>
<form id="lensForm">
Select the type of lenses you want:
<select id="lensSel" onChange="onChange();">
<!--<option onMouseOver="changeBackgroundImageSelectOne(this);" value="selectOneLens" selected="selected">Select one</option>
<option id="hoverPortraitL" onMouseOver="changeBackgroundImagePortraitL(this);" value="portraitLens">Normal “Portrait” Lens / 35-50mm</option>
<option id="hoverTelephoto" onMouseOver="changeBackgroundImageTelephoto(this);" value="telephotoLens">Telephoto Zoom Lens / > 200mm</option>
<option id="hoverWide" onMouseOver="changeBackgroundImageWide(this);" value="wideAngleLens">Ultra-Wide Angle Lens / < 35mm</option>-->
</select>
</form>
</div>
<div id="resultForm">
<h1>Your DSLR Selections...</h1>
<form id="result" onsubmit="true">
<!--Store User Selection Text Node Element Here-->
<!--<p>Your DSLR budget range selected was:</p>
<p>The DSLR brand you selected was:</p>
<p>The type of photography you selected was:</p>
<p>The type of lenses you selected was:</p>
<input type="submit" value="Confirm Purchase"/>
<input type="button" value="Reset All"/>-->
</form>
</div>
</div>
</body>
换句话说,如果希望变量保留其值,请移动此行:
<div id="selForm">
<form id="budgetForm">
<!--show a large print of green font color and size money-->
Select your DSLR budget range:
<select id="budgetSel" onChange="onChange();">
<!--<option value="selectOneBudget" onMouseOver="changeBackgroundImageSelectOne(this);" selected="selected">Select one</option>
<option id="hover500" value="fiveHundredDollars" onMouseOver="changeBackgroundImage500(this);">< $500</option>
<option id="hover1000" value="thousandDollars" onMouseOver="changeBackgroundImage1000(this);">< $1000</option>-->
</select>
</form>
<form id="brandForm">
<!--Show images of the company one by one (fade in, fade out)-->
Select the DSLR brand you want:
<select id="brandSel" onChange="onChange();">
<!--<option onMouseOver="changeBackgroundImageSelectOne(this);" value="selectOneBrand" selected="selected">Select one</option>
<option id="hoverCanon" onMouseOver="changeBackgroundImageCanon(this);" value="Canon">Canon</option>
<option id="hoverNikon" onMouseOver="changeBackgroundImageNikon(this);" value="Nikon">Nikon</option>
<option id="hoverSony" onMouseOver="changeBackgroundImageSony(this);" value="Sony">Sony</option>
<option id="hoverPentax" onMouseOver="changeBackgroundImagePentax(this);" value="Pentax">Pentax</option>-->
</select>
</form>
<form id="typeForm">
<!--Show stunning beautiful pictures of each type of photography-->
<!--Select multiples by click CTRL + Left-Click on mouse.-->
Select the type of photography you plan on doing with a DSLR:
<select id="typeSel" onChange="onChange();">
<!--<option onMouseOver="changeBackgroundImageSelectOne(this);" value="selectOneType" selected="selected">Select one</option>
<option id="hoverLandscape" onMouseOver="changeBackgroundImageLandscape(this);" value="Landscape">Landscape</option>
<option id="hoverWildlife" onMouseOver="changeBackgroundImageWildlife(this);" value="WildLife">Wildlife</option>
<option id="hoverAerial" onMouseOver="changeBackgroundImageAerial(this);" value="Aerial">Aerial</option>
<option id="hoverSports" onMouseOver="changeBackgroundImageSports(this);" value="Sports">Sports</option>
<option id="hoverPortrait" onMouseOver="changeBackgroundImagePortrait(this);" value="Portrait">Portrait</option>
<option id="hoverArchitectural" onMouseOver="changeBackgroundImageArchitectural(this);" value="Architectural">Architectural</option>
<option id="hoverMacro" onMouseOver="changeBackgroundImageMacro(this);" value="Macro">Macro</option>-->
</select>
</form>
<form id="lensForm">
Select the type of lenses you want:
<select id="lensSel" onChange="onChange();">
<!--<option onMouseOver="changeBackgroundImageSelectOne(this);" value="selectOneLens" selected="selected">Select one</option>
<option id="hoverPortraitL" onMouseOver="changeBackgroundImagePortraitL(this);" value="portraitLens">Normal “Portrait” Lens / 35-50mm</option>
<option id="hoverTelephoto" onMouseOver="changeBackgroundImageTelephoto(this);" value="telephotoLens">Telephoto Zoom Lens / > 200mm</option>
<option id="hoverWide" onMouseOver="changeBackgroundImageWide(this);" value="wideAngleLens">Ultra-Wide Angle Lens / < 35mm</option>-->
</select>
</form>
</div>
<div id="resultForm">
<h1>Your DSLR Selections...</h1>
<form id="result" onsubmit="true">
<!--Store User Selection Text Node Element Here-->
<!--<p>Your DSLR budget range selected was:</p>
<p>The DSLR brand you selected was:</p>
<p>The type of photography you selected was:</p>
<p>The type of lenses you selected was:</p>
<input type="submit" value="Confirm Purchase"/>
<input type="button" value="Reset All"/>-->
</form>
</div>
</div>
</body>
var pTextBudget, pTextBrand, pTextType, pTextLens;
到onChange()
函数的外部,以便在从一次调用函数到下一次调用函数的范围内定义变量。局部变量(函数中用var
声明的变量)仅在函数的一次调用期间存在。函数完成后,这些变量将被删除