如何在for循环中添加一定次数的数字并在HTML上显示



**嗨,很抱歉有些问题看起来很简单,因为我对Javascript编码还很陌生。好了。。。在我的html上,我有三个输入字段:风管尺寸、隔热层和孔数。我想在HTML上显示一组与孔的数量、隔热层和输入的管道尺寸相关的测量值。例如,第一个孔的测量值、第二个孔、第三个孔等。然而,第一个测量值的计算方式与其余测量值不同。也许这可以澄清公式和我想在屏幕上显示的内容:

1.输入风管尺寸的测量值。

2.输入绝缘厚度。

3.输入孔的数量。有了这些信息,我想根据孔的数量和风管尺寸测量值来计算和显示测量值。

这里有一个例子:

管道尺寸:400 mm

绝缘:50 mm

孔数:4

隔热层(50(*2-管道尺寸,例如400-100=300,然后300/4(孔数(=75(希望在HTML上显示为:"孔间距=75 mm"(

对于第一次测量(第一个孔间距(=(孔间距(75/2+50(绝缘(=87.5 mm(这将是DOM上显示的第一次测量(。

然后,对于所有其他相对测量(由孔的数量>元素确定(,将孔的间距添加到第一个孔的间距并显示此值。

E.g 87.5+75=162.5(这是显示的第二个孔测量值(

162.5+75=237.5(这是显示的第三个孔测量值(

237.5+75=312.5(这是显示的第三个孔测量值(**

function ductPitotHoleCalculate() {
var ductSize = document.getElementById("duct-size").value;
var insulation = document.getElementById("insulation").value;
var amountOfHoles = document.getElementById("number-of-holes").value;
//It should multiply insulation by 2 and subtract from ductsize
var subtractInsulation = parseFloat(ductSize) - parseFloat(insulation) * 2;
//It should find the measurement between holes by dividing numberofHoles and subtractInsulation.
var spacingOfHoles = subtractInsulation / parseFloat(amountOfHoles);
//It should use the spacingOfHoles number and divide by 2 and add insulation for first hole and show on DOM 
var firstHoleSpacing = spacingOfHoles / 2 + parseFloat(insulation);

// It should use a for loop to parse amountOfHoles and add spacingofHoles to firstHoleSpacing
var newAmount = parseFloat(amountOfHoles) - 2;
var myArray = [];
for (var i = 0; i < newAmount; i + spacingOfHoles) {
myArray.push(firstHoleSpacing + spacingOfHoles);
}
document.getElementById("answer-5").innerHTML = myArray;

}
<section id = "VSD-calculator">
<div id = "pitot-holes">
<h2> Calculate pitot hole duct measurements (type 0 for no insulation) 
</h2>
<h2 id="answer-5"></h2>
<input type = "number" id = "duct-size" placeholder="Duct size in 
mm"class="mytext">
<input type = "number" id = "insulation" placeholder="Insulation in 
mm"class="mytext">
<input type = "number" id = "number-of-holes" placeholder="Number of 
Holes"class="mytext">
<button onclick="ductPitotHoleCalculate()"id="calc-button" class = "calc" 
>Calculate</button>
</div>
</section>

感谢所有帮助我的人,我现在已经解决了这个问题!我认为,通过解释并键入它,可以帮助我理解它并编写代码。我最终使用了while循环。

function ductPitotHoleCalculate() {
var ductSize = document.getElementById("duct-size").value;
var insulation = document.getElementById("insulation").value;
var amountOfHoles = document.getElementById("number-of-holes").value;
//It should multiply insulation by 2 and subtract from ductsize
var subtractInsulation = parseFloat(ductSize) - parseFloat(insulation) * 2;
//It should find the measurement between holes by dividing numberofHoles and 
subtractInsulation.
var spacingOfHoles = subtractInsulation / parseFloat(amountOfHoles);
//It should use the spacingOfHoles number and divide by 2 and add insulation for 
first 
hole and show on DOM 
var firstHoleSpacing = spacingOfHoles.toFixed(2) / 2 + parseFloat(insulation);
var i = 0;
var strHoles = parseFloat(amountOfHoles);
var myArray = '';
while (i < strHoles) {
myArray += firstHoleSpacing + (i * spacingOfHoles) + ' mm, ' + '<br />';
i++;
}
document.getElementById("answer-5").innerHTML = `Hole spacing = ${spacingOfHoles} 
mm    
` + '<br />'  + myArray;
}

最新更新