有一个计算器可以从输入字段中推出这些选项。如何在每个显示的选项之间添加“或”一词？这是我要修改的具体代码。
<div style="width: 100%">
<div style="height: 100px;">
<h2>FOAM DENSITY</h2>
<select id="density" style="display: inline-block;float:right;" >
<option value="standard">Standard (1.75 lbs per cubic feet)</option>
<option value="open">Open Cell (0.75 lbs per cubic feet)</option>
<option value="high">High (2.8 lbs per cubic feet)</option>
</select>
</div>
<div style="height: 100px;">
<h2>FOAM THICKNESS</h2>
<input id="thickness" name="thickness" type="text" placeholder="Inches" style="display: inline-block;float:right;"/>
</div>
<div style="height: 100px;">
<h2>SQUARE FOOTAGE</h2>
<input id="area" name="area" type="text" placeholder="Square Feet" style="display: inline-block;float:right;"/>
</div>
<div style="height: 100px;transition-timing-function: ease-in-out;" align="center">
<button id ="calc" onclick="calc()" >Calculate</button>
</div>
<div id="opn" style="display: none">
<p id="sys31"></p>
<p id="sys100"></p>
</div>
<div id="stndrd" style="display: none">
<p id="sys1"></p>
<p id="sys9"></p>
<p id="sys15"></p>
<p id="sys50"></p>
</div>
<div id="hgh" style="display: none">
<p id="sys10">h</p>
<p id="sys33">h</p>
</div>
<style>
h2{
color:#3a55a7;display: inline-block;float:left;line-height: 0;
}
input[type=text]{
width: 200px;height: 35%;padding-left: 15px; background-color: rgba(0,0,0,0.00); border-radius: 5px; border-color:#f21d28;border-style:solid;font-family:'Nexa';text-transform:uppercase;line-height: 10px;outline: none;
}
select{
height: 35%;font-family: 'Nexa'; background-color: rgba(0,0,0,0.00); border-radius: 5px;border-color:#f21d28;outline: none; border-style:solid; border-width: 2px;
}
#calc{
background-color: #f21d28;border: none;color: white;padding: 15px 32px;text-align: center;font-size: 16px;text-transform:uppercase; font-family:'Nexa'; display: block; border-radius: 5px; letter-spacing: 2px;-webkit-transition: background-color .25s;transition: background-color .25s;transition-timing-function: ease-in-out;outline: none;
}
#calc:hover{
color: #f21d28;background-color: #fff;
}
</style>
<script>
function calc(){
document.getElementById("opn").style.display = "none";
document.getElementById("stndrd").style.display = "none";
document.getElementById("hgh").style.display = "none";
var den = document.getElementById("density").value;
var thck = document.getElementById("thickness").value;
var area = document.getElementById("area").value;
var totalarea = area * thck;
if(den == "open"){
var sys31 = parseFloat(totalarea / 380).toFixed(2);
var sys100 = parseFloat(totalarea / 1200).toFixed(2);
document.getElementById("sys31").innerHTML = "System 31 Kits: "+sys31;
document.innerHTML = "or";
document.getElementById("sys100").innerHTML ="System 100 Kits: "+sys100;
document.getElementById("opn").style.display = "block";
}
else if(den == "standard"){
var sys1 = parseFloat(totalarea / 12).toFixed(2);
var sys9 = parseFloat(totalarea / 108).toFixed(2);
var sys15 = parseFloat(totalarea / 200).toFixed(2);
var sys50 = parseFloat(totalarea / 600).toFixed(2);
document.getElementById("sys1").innerHTML = "System I Kits: "+sys1;
document.getElementById("sys9").innerHTML = "System 9 Kits: "+sys9;
document.getElementById("sys15").innerHTML = "System 15 Kits: "+sys15;
document.getElementById("sys50").innerHTML = "System 50 Kits: "+sys50;
document.getElementById("stndrd").style.display = "block";
}
else{
var sys10 = parseFloat(totalarea / 120).toFixed(2);
var sys33 = parseFloat(totalarea / 396).toFixed(2);
document.getElementById("sys10").innerHTML = "System 10 Kits: "+sys10;
document.getElementById("sys33").innerHTML = "System 33 Kits: "+sys33;
document.getElementById("hgh").style.display = "block";
}
}
</script>
</div>
在前端，我只是想在屏幕上显示单词或在列出的结果之间，所以目前它是这样的。
System I Kits
System 9 Kits
System 15 Kits
System 50 Kits
我喜欢这样显示
System I Kits
or
System 9 Kits
or
System 15 Kits
or
System 50 Kits
它目前垂直显示。
最佳答案
我可以用下面的 html 解决这个问题
<div style="width: 100%">
<div style="height: 100px;">
<h2>FOAM DENSITY</h2><select id="density" style="display: inline-block;float:right;" >
<option value="standard">Standard (1.75 lbs per cubic feet)</option>
<option value="open">Open Cell (0.75 lbs per cubic feet)</option>
<option value="high">High (2.8 lbs per cubic feet)</option>
</select>
</div>
<div style="height: 100px;">
<h2>FOAM THICKNESS</h2><input id="thickness" name="thickness" type="text" placeholder="Inches" style="display: inline-block;float:right;"/>
</div>
<div style="height: 100px;">
<h2>SQUARE FOOTAGE</h2><input id="area" name="area" type="text" placeholder="Square Feet" style="display: inline-block;float:right;"/>
</div>
<div style="height: 100px;transition-timing-function: ease-in-out;" align="center">
<button id ="calc" onclick="calc()" >Calculate</button>
</div>
<div id="opn" style="display: none">
<p id="sys31"></p>
<p class="or_space">OR</p>
<p id="sys100"></p>
</div>
<div id="stndrd" style="display: none">
<p id="sys1"></p>
<p class="or_space">OR</p>
<p id="sys9"></p>
<p class="or_space">OR</p>
<p id="sys15"></p>
<p class="or_space">OR</p>
<p id="sys50"></p>
</div>
<div id="hgh" style="display: none">
<p id="sys10">h</p>
<p class="or_space">OR</p>
<p id="sys33">h</p>
</div>
<style>
h2{
color:#3a55a7;display: inline-block;float:left;line-height: 0;
}
input[type=text]{
width: 200px;height: 35%;padding-left: 15px; background-color: rgba(0,0,0,0.00); border-radius: 5px; border-color:#f21d28;border-style:solid;font-family:'Nexa';text-transform:uppercase;line-height: 10px;outline: none;
}
select{
height: 35%;font-family: 'Nexa'; background-color: rgba(0,0,0,0.00); border-radius: 5px;border-color:#f21d28;outline: none; border-style:solid; border-width: 2px;
}
#calc{
background-color: #f21d28;border: none;color: white;padding: 15px 32px;text-align: center;font-size: 16px;text-transform:uppercase; font-family:'Nexa'; display: block; border-radius: 5px; letter-spacing: 2px;-webkit-transition: background-color .25s;transition: background-color .25s;transition-timing-function: ease-in-out;outline: none;
}
#calc:hover{
color: #f21d28;background-color: #fff;
}
.or_space{
margin: -10px 0 5px 0;
}
</style>
<script>
function calc() {
document.getElementById("opn").style.display = "none";
document.getElementById("stndrd").style.display = "none";
document.getElementById("hgh").style.display = "none";
var den = document.getElementById("density").value;
var thck = document.getElementById("thickness").value;
var area = document.getElementById("area").value;
var totalarea = area * thck;
if (den == "open") {
var sys31 = parseFloat(totalarea / 380).toFixed(2);
var sys100 = parseFloat(totalarea / 1200).toFixed(2);
document.getElementById("sys31").innerHTML = "System 31 Kits: " + sys31;
document.innerHTML = "or";
document.getElementById("sys100").innerHTML = "System 100 Kits: " + sys100;
document.getElementById("opn").style.display = "block";
} else if (den == "standard") {
var sys1 = parseFloat(totalarea / 12).toFixed(2);
var sys9 = parseFloat(totalarea / 108).toFixed(2);
var sys15 = parseFloat(totalarea / 200).toFixed(2);
var sys50 = parseFloat(totalarea / 600).toFixed(2);
document.getElementById("sys1").innerHTML = "System I Kits: " + sys1;
document.getElementById("sys9").innerHTML = "System 9 Kits: " + sys9;
document.getElementById("sys15").innerHTML = "System 15 Kits: " + sys15;
document.getElementById("sys50").innerHTML = "System 50 Kits: " + sys50;
document.getElementById("stndrd").style.display = "block";
} else {
var sys10 = parseFloat(totalarea / 120).toFixed(2);
var sys33 = parseFloat(totalarea / 396).toFixed(2);
document.getElementById("sys10").innerHTML = "System 10 Kits: " + sys10;
document.getElementById("sys33").innerHTML = "System 33 Kits: " + sys33;
document.getElementById("hgh").style.display = "block";
}
}
</script>
感谢大家的帮助。
关于javascript - 如何在这些选项之间放置文本，特别是单词 "Or"？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53287675/