Javascript 如何放置文本，特别是单词“quot；”；或；在这些选项之间？

有一个计算器可以从输入字段中推出这些选项。如何在每个显示的选项之间添加“或”一词？下面是我试图修改的特定代码

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

泡沫密度
标准（每立方英尺1.75磅）
开放式电池（每立方英尺0.75磅）
高（每立方英尺2.8磅）
泡沫厚度
平方英尺
算计

或


或

或

或

h
或
h
氢{
颜色：#3a55a7；显示：内联块；浮动：左；线条高度：0；
}
输入[类型=文本]{
宽度：200px；高度：35%；左侧填充：15px；背景色：rgba（0,0,0.00）；边框半径：5px；边框颜色：f21d28；边框样式：纯色；字体系列：'Nexa'；文本转换：大写；行高：10px；轮廓：无；
}
挑选{
高度：35%；字体系列：“Nexa”；背景颜色：rgba（0,0,0,0.00）；边框半径：5px；边框颜色：#f21d28；轮廓：无；边框样式：实心；边框宽度：2px；
}
#计算{
背景色：#f21d28；边框：无；颜色：白色；填充：15px 32px；文本对齐：居中；字体大小：16px；文本转换：大写；字体系列：'Nexa'；显示：块；边框半径：5px；字母间距：2px；-webkit转换：背景色.25s；转换：背景色.25s；转换计时功能：轻松输入输出；轮廓：无；
}
#计算：悬停{
颜色：#f21d28；背景色：#fff；
}
.或_空间{
保证金：-10px0.5px0；
}
函数计算（）{
document.getElementById（“opn”）.style.display=“无”；
document.getElementById（“stndrd”）.style.display=“无”；
document.getElementById（“hgh”）.style.display=“无”；
var den=document.getElementById（“密度”）.value；
var thck=document.getElementById（“厚度”）.value；
var区域=document.getElementById（“区域”）.value；
var totalarea=面积*thck；
如果（den=“打开”）{
var sys31=parseFloat（总面积/380）.toFixed（2）；
var sys100=parseFloat（总面积/1200）.toFixed（2）；
document.getElementById（“sys31”）.innerHTML=“系统31套件：”+sys31；
document.innerHTML=“或”；
document.getElementById（“sys100”）.innerHTML=“系统100套件：”+sys100；
document.getElementById（“opn”）.style.display=“block”；
}否则如果（den=“标准”）{
var sys1=parseFloat（总面积/12）.toFixed（2）；
var sys9=parseFloat（总面积/108）.toFixed（2）；
var sys15=parseFloat（总面积/200）.toFixed（2）；
var sys50=parseFloat（总面积/600）.toFixed（2）；
document.getElementById（“sys1”）.innerHTML=“系统I工具包：”+sys1；
document.getElementById（“sys9”）.innerHTML=“系统9工具包：”+sys9；
document.getElementById（“sys15”）.innerHTML=“系统15套件：”+sys15；
document.getElementById（“sys50”）.innerHTML=“系统50套件：”+sys50；
document.getElementById（“stndrd”）.style.display=“block”；
}否则{
var sys10=parseFloat（总面积/120）.toFixed（2）；
var sys33=parseFloat（总面积/396）.toFixed（2）；
document.getElementById（“sys10”）.innerHTML=“系统10套件：”+sys10；
document.getElementById（“sys33”）.innerHTML=“系统33套件：”+sys33；
document.getElementById（“hgh”）.style.display=“block”；
}
}

---

感谢大家的帮助。

也许您应该提供当前结果和所需结果。目前，很难理解你的意思。在前端，我只是想在屏幕上显示单词或在列出的结果之间，所以现在看起来像这样。System I Kits System 9 Kits System 15 Kits System 50 Kits Id是否希望它显示为当前垂直显示的System I Kits或System 9 Kits或System 15 Kits或System 50 Kits？是否可以添加相关HTML代码请？@JackBashford I随您更新requested@PatrickQ我的问题现在有意义了吗？

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