如何在这些选项之间专门放置文本“或”一词？
[英]How do I place text specifically the word "Or" in-between these options?
问题描述
There is a calculator that pushes out these options from input fields.
有一个计算器可以从输入字段中推出这些选项。 How do I add the word "or" in between each displayed option?如何在每个显示的选项之间添加单词“或”？ Here is the specific code that i am trying to modify.这是我试图修改的特定代码。
<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>
On the front-end I am just trying to show on screen the word or in between the listed results so currently it is like this.在前端，我只是想在屏幕上显示单词或在列出的结果之间显示，所以目前它是这样的。
System I Kits
System 9 Kits
System 15 Kits
System 50 Kits
Id like it to display like this我喜欢它像这样显示
System I Kits
or
System 9 Kits
or
System 15 Kits
or
System 50 Kits
It currently displays vertically.它目前垂直显示。
1 个解决方案
解决方案1
1 已采纳 2018-11-15 17:32:20
I was able to fix this issue with the following html我能够使用以下 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>
Thank you everyone for attempting to help.感谢大家尝试提供帮助。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
如何在 p5js 中的命令之间暂停？ - How do I make a pause in-between commands in p5js?
如何隐藏/删除两个元素之间的所有文本？ - how to hide/remove all text in-between two elements?
如何从 HTML 表中提取数据，特别是<td id="word"> ，使用 JavaScript？ - How do I pull data from a HTML table, specifically <td id="word">, using JavaScript?
如何用另一个单词替换正文中的每个单词？ - How do I replace every word in a body of text with another word?
单击汉堡菜单时，如何在导航栏中显示列表？ 特别是“家”和“关于”的文字 - How do I display the list in a navBar when you click on the hamburger menu? Specifically the 'home' and 'about' 'text
如何确认一个公司，但在两者之间设置一个 function？ - How to confirm a firm but set a function in-between?
单击汉堡菜单时，如何在导航栏中显示列表？ 特别是家庭和关于'文本 - How do I display the list in a navBar when you click on the hamburger menu? Specifically the home and about 'text
JS：我如何提交两个单独的值（表单）并将它们显示在 0-24 小时范围内的条形图中（例如，选择了 6 和 12 - 中间小时变为红色 - JS: How do I submit two separate values (form) and display them in a bar ranging 0-24 hours (e.g. 6 and 12 are chosen — the in-between hours turn red
我如何抓取文本并将它们按特定顺序放置？ - How do i grab text and place them in a particular order?
如何将div与文本换行连续放置？ - How do I place divs in a row with text-wrap?
相关标签