我的代码会在单击按钮时添加一个输入字段。我将其设置为在限制 == 5(计数器)时显示 Bootstrap 警告。这一切都是通过设置 .innerhtml 完成的 我的问题是，当我在 5(限制)次后点击添加字段时，它会添加警告，但会清除字段值。我怎样才能重写这段代码以使值不消失？在过去的 2 个小时里，我一直在谷歌上尝试不同的东西，但运气不佳，希望你们能在这里提供帮助。
function typePicker(){
var sel=document.getElementById("type");
var typeInputs=document.getElementById("typeInputs");
var aps = '<div class="form-group"><input type="text" class="form-control" name="ipaddress" id="ipaddress" placeholder="IP Address"></div><!-- IP Address --><div class="form-group"><input type="text" class="form-control" name="mac-address" id="mac-address" placeholder="MAC Address"></div><!-- MAC Address --><div class="form-group"><input type="text" class="form-control" name="range" id="range" placeholder="Range in M"></div><!-- Range --><div class="form-group"><input type="text" class="textbox-n form-control" name="bands" id="bands" placeholder="Bands" ></div><!-- Bands --><div class="form-group"><input type="text" class="form-control" name="channels" id="channels" placeholder="Channel(s)"></div><!-- Channels --><div class="form-group"><input placeholder="Date Bought" class="textbox-n form-control" type="text" onfocus="(this.type="date")" onblur="(this.type="text")" id="date-bought" name="dateBought"></div><!-- Date Bought --><div class="btn-group" data-toggle="buttons"><label for="">PoE</label><br><label class="btn btn-primary"><input type="radio" name="poe" id="option1"> Yes</label><label class="btn btn-primary"><input type="radio" name="poe" id="option2"> No</label></div> <br><br><!-- PoE --><div class="form-group"><input placeholder="Warranty Expiration Date" class="textbox-n form-control" type="text" onfocus="(this.type="date")" onblur="(this.type="text")" id="warranty-date" name="warrantyDate"></div><!-- Warranty Date --><div class="form-group"><input class="form-control" id="location" placeholder="Location"></div><!-- Location --></div>';
var cables = '<div class="form-group"><input type="text" class="form-control" id="type" name="type" placeholder="Type"></div><div class="form-group"><input type="number" class="form-control" id="cost" name="cost" placeholder="Cost"></div><!-- Cost --><div class="form-group"><input type="number" class="form-control" id="quantity" name="quantity" placeholder="Quantity"></div><!-- Quantity --><div class="form-group"><input type="text" class="form-control" id="location" name="location" placeholder="Location"></div><!-- Location -->';
var deskPhones = '<div class="form-group"><input placeholder="Date Bought" class="textbox-n form-control" type="text" onfocus="(this.type="date")" onblur="(this.type="text")" id="date-bought" name="dateBought"></div><!-- Date Bought --><div class="form-group"><input type="number" class="form-control" id="cost" name="cost" placeholder="Cost"></div><!-- Cost --><div class="form-group"><input type="text" class="form-control" id="location" name="location" placeholder="Location"></div><!-- Location --><div class="form-group"><input type="text" class="form-control" id="phoneNumber" name="phoneNumber" placeholder="Phone Number"></div> <!-- Phone Number --><div class="form-group"><input type="text" class="form-control" id="extension" name="extension" placeholder="Extension"></div><!-- Extension -->';
var desktops = '<div class="form-group"><input type="text" class="form-control" id="cpu" name="cpu" placeholder="CPU"></div><!-- CPU --><div class="form-group"><input type="text" class="form-control" id="ram" name="ram" placeholder="RAM"></div> <!-- RAM --><div class="form-group"><input type="text" class="form-control" id="gpu" name="gpu" placeholder="GPU"></div><!-- GPU --><div class="form-group"><input type="text" class="form-control" id="vram" name="vram" placeholder="VRAM"></div><!-- VRAM --><div class="form-group"><input type="number" class="form-control" id="numDrive" name="numDrive" placeholder="Number of Drives"></div><!-- Number of Drives --><div class="form-group"><input type="number" class="form-control" id="sizeDrive name="sizeDrive" placeholder="Size of Drive(s)"></div><!-- Size of Drive(s) --><div class="form-group"><input type="text" class="form-control" id="sizeDrive" name="sizeDrive" placeholder="Type of Drive(s)"></div><!-- Type of Drives --><div class="form-group"><input placeholder="Date Bought" class="textbox-n form-control" type="text" onfocus="(this.type="date")" onblur="(this.type="text")" id="date-bought" name="dateBought"></div><!-- Date Bought --><div class="form-group"><input type="number" class="form-control" id="cost" name="cost" placeholder="Cost"></div><!-- Cost --><div class="form-group"><input type="number" class="form-control" id="life" name="life" placeholder="Life Expectancy In Months" min="0.25" step="0.25"></div><!-- Expected Life in Months --><div class="form-group"><input type="number" class="form-control" id="usbPorts" name="usbPorts" placeholder="Number of USB Ports"></div><!-- Number of USB Ports --><div class="form-group"><input type="text" class="form-control" id="name" name="name" placeholder="Machine Name"></div><!-- Machine Name --><div class="form-group"><input placeholder="Warranty Expiration Date" class="textbox-n form-control" type="text" onfocus="(this.type="date")" onblur="(this.type="text")" id="warranty-date" name="warrantyDate"></div><!-- Warranty Date --><div class="form-group"><input type="text" class="form-control" id="location" name="location" placeholder="Location"></div><!-- Location --><div class="btn-group" data-toggle="buttons"><label for="">Stand Alone</label><br><label class="btn btn-primary"><input type="radio" name="standAlone" id="option1"> Yes</label><label class="btn btn-primary"><input type="radio" name="standAlone" id="option2"> No</label></div> <br><br><!-- Stand Alone -->';
var laptops = '<div class="form-group"><input type="text" class="form-control" id="cpu" name="cpu" placeholder="CPU"></div><!-- CPU --><div class="form-group"><input type="text" class="form-control" id="ram" name="ram" placeholder="RAM"></div><!-- RAM --><div class="form-group"><input type="text" class="form-control" id="gpu" name="gpu" placeholder="GPU"></div><!-- GPU --><div class="form-group"><input type="text" class="form-control" id="vram" name="vram" placeholder="VRAM"></div><!-- VRAM --><div class="form-group"><input type="number" class="form-control" id="sizeDrive" name="sizeDrive" placeholder="Size of Drive(s)"></div><!-- Size of Drive(s) --><div class="form-group"><input type="text" class="form-control" id="typeDrive"name="typeDrive" placeholder="Type of Drive(s)"></div><!-- Type of Drives --><div class="form-group"><input placeholder="Date Bought" class="textbox-n form-control" type="text" onfocus="(this.type="date")" onblur="(this.type="text")" id="date-bought" name="dateBought"></div><!-- Date Bought --><div class="form-group"><input type="number" class="form-control" id="cost" name="cost" placeholder="Cost"></div><!-- Cost --><div class="form-group"><input type="number" class="form-control" id="life" name="life" placeholder="Life Expectancy In Months" min="0.25" step="0.25"></div><!-- Expected Life in Months --><div class="form-group"><input type="number" class="form-control" id="usbPorts" name="usbPorts" placeholder="Number of USB Ports"></div><!-- Number of USB Ports --><div class="form-group"><input type="text" class="form-control" id="name" name="name" placeholder="Machine Name"></div><!-- Machine Name --><div class="form-group"><input placeholder="Warranty Expiration Date" class="textbox-n form-control" type="text" onfocus="(this.type="date")" onblur="(this.type="text")" id="warranty-date" name="warrantyDate"></div><!-- Warranty Date --><div class="form-group"><input type="text" class="form-control" id="location" name="location" placeholder="Location"></div><!-- Location --><div class="form-group"><input type="text" class="form-control" id="user" name="user" placeholder="User"></div><!-- User --><div class="btn-group" data-toggle="buttons"><label for="">Stand Alone</label><br><label class="btn btn-primary"><input type="radio" name="standAlone" id="option1"> Yes</label><label class="btn btn-primary"><input type="radio" name="standAlone" id="option2"> No</label></div> <br><br><!-- Stand Alone -->';
var mobilePhones = '<div class="form-group"><input placeholder="Date Bought" class="textbox-n form-control" type="text" onfocus="(this.type="date")" onblur="(this.type="text")" id="date-bought" name="dateBought"></div><!-- Date Bought --><div class="form-group"><input type="number" class="form-control" id="cost" name="cost" placeholder="Cost"></div><!-- Cost --><div class="form-group"><input type="number" class="form-control" id="lifeExpectancy" name="lifeExpectancy" placeholder="Life Expectancy"></div><!-- Life Expectancy --><div class="form-group"><input placeholder="Warranty Expiration Date" class="textbox-n form-control" type="text" onfocus="(this.type="date")" onblur="(this.type="text")" id="warranty-date" name="warrantyDate"></div><!-- Warranty Date --><div class="form-group"><input type="text" class="form-control" id="phoneNumber" name="phoneNumber" placeholder="Phone Number"></div><!-- Phone Number --><div class="form-group"><input type="text" class="form-control" id="os" name="os" placeholder="Operating System"></div><!-- OS --><div class="form-group"><input type="text" class="form-control" id="simNumber" name="simNumber" placeholder="SIM Number"></div><!-- SIM Number -->';
var monitors = '<div class="form-group"><input placeholder="Date Bought" class="textbox-n form-control" type="text" onfocus="(this.type="date")" onblur="(this.type="text")" id="date-bought" name="dateBought"></div><!-- Date Bought --><div class="form-group"><input type="text" class="form-control" id="cost" nameid="cost" placeholder="Cost"></div><!-- Cost --><div class="form-group"><input type="number" class="form-control" id="life" name="life" placeholder="Life Expectancy In Months" min="0.25" step="0.25"></div><!-- Expected Life in Months --><div class="form-group"><input placeholder="Warranty Expiration Date" class="textbox-n form-control" type="text" onfocus="(this.type="date")" onblur="(this.type="text")" id="warranty-date" name="warrantyDate"></div><!-- Warranty Date --><div class="form-group"><input type="text" class="form-control" id="location" name="location" placeholder="Location"></div><!-- Location --><div class="form-group"><input type="text" class="form-control" id="resolution" name="resolution" placeholder="Resolution"></div><!-- Resolution --><div class="form-group"><input type="text" class="form-control" id="panelType" name="panelType" placeholder="Panel Type"></div><!-- Panel Type -->';
var printers = '<div class="form-group"><input placeholder="Date Bought" class="textbox-n form-control" type="text" onfocus="(this.type="date")" onblur="(this.type="text")" id="date-bought" name="dateBought"></div><!-- Date Bought --><div class="form-group"><input class="form-control" id="cost" name="cost" placeholder="Cost"></div><!-- Cost --><div class="form-group"><input class="form-control" id="lifeExpectancy" name="lifeExpectancy" placeholder="Life Expectancy"></div><!-- Life Expectancy --><div class="form-group"><input placeholder="Warranty Expiration Date" class="textbox-n form-control" type="text" onfocus="(this.type="date")" onblur="(this.type="text")" id="warranty-date" name="warrantyDate"></div><!-- Warranty Date --><div class="form-group"><input class="form-control" id="location" name="location" placeholder="Location"></div><!-- Location --> ';
var projectors = '<div class="form-group"><input placeholder="Date Bought" class="textbox-n form-control" type="text" onfocus="(this.type="date")" onblur="(this.type="text")" id="date-bought" name="dateBought"></div><!-- Date Bought --><div class="form-group"><input placeholder="Warranty Expiration Date" class="textbox-n form-control" type="text" onfocus="(this.type="date")" onblur="(this.type="text")" id="warranty-date" name="warrantyDate"></div><!-- Warranty Date --><div class="form-group"><input type="text" class="form-control" id="location" name="location" placeholder="Location"></div><!-- Location --><div class="form-group"><input type="text" class="form-control" id="resolution" name="resolution" placeholder="Resolution"></div><!-- Resolution -->';
var routers = '<div class="form-group "><select class="custom-select form-control" id="sel-speed" name="router-speed" onchange="speed()"><option selected>Select Router Speed</option><option value="100">10/100 Mbps</option><option value="1000">10/100/1000 Mbps</option><option value="10000">10/100/1000/10000 Mbps</option><option value="other">Other</option></select></div><!-- Router Speed --><div class="form-group" id="speed" name="speed"></div> <!-- Router Speed other input only show when above "other" is selected --><div class="form-group"><input placeholder="Date Bought" class="textbox-n form-control" type="text" onfocus="(this.type="date")" onblur="(this.type="text")" id="date-bought" name="dateBought"></div><!-- Date Bought --><div class="form-group"><input type="number" class="form-control" id="life" name="life" placeholder="Life Expectancy In Months" min="0.25" step="0.25"></div><!-- Expected Life in Months --><div class="btn-group" data-toggle="buttons"><label for="">PoE</label><br><label class="btn btn-primary"><input type="radio" name="poe" id="option1"> Yes</label><label class="btn btn-primary"><input type="radio" name="poe" id="option2"> No</label></div><br><br><!-- PoE --><div class="form-group"><input placeholder="Warranty Expiration Date" class="textbox-n form-control" type="text" onfocus="(this.type="date")" onblur="(this.type="text")" id="warranty-date" name="warrantyDate"></div><!-- Warranty Date -->';
var switches = '<div class="form-group "><select class="custom-select form-control" id="sel-speed" name="switch-speed" onchange="speed()"><option selected>Select Switch Speed</option><option value="100">10/100 Mbps</option><option value="1000">10/100/1000 Mbps</option><option value="10000">10/100/1000/10000 Mbps</option><option value="other">Other</option></select></div><!-- Switch Speed --><div class="form-group" id="speed"></div> <!-- Switch Speed other input only show when above "other" is selected --><div class="form-group"><input placeholder="Date Bought" class="textbox-n form-control" type="text" onfocus="(this.type="date")" onblur="(this.type="text")" id="date-bought" name="dateBought"></div><!-- Date Bought --><div class="form-group"><input type="number" class="form-control" id="life" name="life" placeholder="Life Expectancy In Months" min="0.25" step="0.25"></div><!-- Expected Life in Months --><div class="form-group"><input type="number" class="form-control" id="switch-ports" name="switch-ports" placeholder="Number of Ports" min="1"></div><!-- Number of Ports --><div class="btn-group" data-toggle="buttons"><label for="">PoE</label><br><label class="btn btn-primary"><input type="radio" name="poe" id="option1"> Yes</label><label class="btn btn-primary"><input type="radio" name="poe" id="option2"> No</label></div><br><br><!-- PoE --><div class="form-group"><input placeholder="Warranty Expiration Date" class="textbox-n form-control" type="text" onfocus="(this.type="date")" onblur="(this.type="text")" id="warranty-date" name="warrantyDate"></div><!-- Warranty Date -->';
var tablets = '<div class="form-group"><input placeholder="Date Bought" class="textbox-n form-control" type="text" onfocus="(this.type="date")" onblur="(this.type="text")" id="date-bought" name="dateBought"></div><!-- Date Bought --><div class="form-group"><input type="text" class="form-control" id="cost" name="cost" placeholder="Cost"></div><!-- Cost --><div class="form-group"><input type="number" class="form-control" id="life" name="life" placeholder="Life Expectancy In Months" min="0.25" step="0.25"></div><!-- Expected Life in Months --><div class="form-group"><input placeholder="Warranty Expiration Date" class="textbox-n form-control" type="text" onfocus="(this.type="date")" onblur="(this.type="text")" id="warranty-date" name="warrantyDate"></div><!-- Warranty Date --><div class="form-group"><input type="text" class="form-control" id="location" name="location" placeholder="Location"></div> <!-- Location --><div class="form-group"><input type="text" class="form-control" id="ram" name="ram" placeholder="RAM"></div><!-- RAM --><div class="form-group"><input type="text" class="form-control" id="resolution" name="resolution" placeholder="Resolution"></div><!-- Resolution -->';
// var other = '<div class="form-group"><label for="customField" class="control-label">Custom Field</label><input type="text" class="form-control" id="customField" name="customField" placeholder="Custom Field"></div>';
var other = '<div class="form-group"><label for="customField" class="control-label">Custom Field</label><input type="text" class="form-control" id="customField" name="customField" placeholder="Custom Field"> </div> <input type="button" class="btn btn-primary add" id="add" value="Add Field"/>';
var type = '<div class="form-group"><input type="text" class="form-control" id="type" name="type" placeholder="Asset Type"></div>';
if(sel.value=="aps"){
typeInputs.innerHTML=aps;
}
if(sel.value=="cables"){
typeInputs.innerHTML=cables;
}
if(sel.value=="deskPhones"){
typeInputs.innerHTML=deskPhones;
}
if(sel.value=="desktops"){
typeInputs.innerHTML=desktops;
}
if(sel.value=="laptops"){
typeInputs.innerHTML=laptops;
}
if(sel.value=="mobilePhones"){
typeInputs.innerHTML=mobilePhones;
}
if(sel.value=="monitors"){
typeInputs.innerHTML=monitors;
}
if(sel.value=="printers"){
typeInputs.innerHTML=printers;
}
if(sel.value=="projectors"){
typeInputs.innerHTML=projectors;
}
if(sel.value=="routers"){
typeInputs.innerHTML=routers;
}
if(sel.value=="switches"){
typeInputs.innerHTML=switches;
}
if(sel.value=="tablets"){
typeInputs.innerHTML=tablets;
}
if(sel.value=="other"){
typeInputs.innerHTML=type + other;
}
}
var typeInputs=document.getElementById("typeInputs");
var otherMessage = '<br><br><div class="alert alert-warning" role="alert">Limit of 5 custom fields for your plan!</div>';
var sel=document.getElementById("type");
var limit = 6;
var counter = 1;
$(document).on("click",".add",function(){
if(counter < limit){
if(sel.value !="other"){
counter = 1;
}
counter ++;
if(counter == limit){
var p = document.getElementById("typeInputs").innerHTML;
return typeInputs.innerHTML = p + otherMessage;
}
var n= $(this).prev(".form-group" ).length+1;
var temp = $(this).prev(".form-group" ).clone();
$('input:first',temp).attr('placeholder','Custom Field').val("");
$(this).prev( ".form-group" ).after(temp);
}
});<div class="form-group">
<label for="type" class="control-label">Type</label>
<select class="form-control selectpicker" title="Type of Asset" name="type" data-live-search="true" id="type" onchange="typePicker()">
<option value="aps">Access Point</option>
<option value="cables">Cable</option>
<option value="other">Other</option>
</select>
</div>
<div class="form-group" id="typeInputs">
</div>
<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>我已经删除了 select 中的一些选项以压缩此处的代码。我也没有包含 typePicker 函数，因为它只显示基于选择值的 html。如果需要，我可以编辑以包含它。 Stack Overflow 说如果我现在添加代码太多，内容不够。
最佳答案
您的问题可能出在这里
var p = document.getElementById("typeInputs").innerHTML;
return typeInputs.innerHTML = p + otherMessage;
innerHTML 属性未反射(reflect)更新的输入。与其将 innerHTML 设置为自身填充消息字符串，不如尝试创建一个元素并将其附加到 DOM 对象。
var warning = document.createElement('div');
warning.innerHTML = '<br><br><div class="alert alert-warning" role="alert">Limit of 5 custom fields for your plan!</div>';
document.getElementById("typeInputs").appendChild(warning);
关于javascript - 添加警告时清除 HTML 输入值，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46758578/