CODEWITHSUNDEEP
javascripthtmlarraysfor-loopmath
Mark McKeon
Mark McKeon

Reputation: 149

How to add numbers in a for loop a set amount of times and display on HTML

**Hi, apologies for what some might seem as an easy question as I am quite new to Javascript coding. So here goes...on my html I have three input fields: Duct size, Insulation and Number of Holes. I want to show an array of measurements on the HTML in relation to the amount of holes, insulation and duct size entered. E.g first hole measurement, second hole, third hole etc... however the first measurement is calculated differently to the remaining measurements. Maybe this can clear up the formula and what I want to show on the screen:

1.Enter a measurement in duct size.

2.Enter insulation thickness.

3.Enter number of holes. With this information I want to calculate and display the measurements based off the number of holes and duct size measurement.

Here is an example:

Duct size: 400 mm

Insulation: 50 mm

Number of holes: 4

Insulation(50) * 2 - Duct size e.g 400 - 100 = 300 then 300 / 4 (number of holes) = 75 (want to show this number on HTML as: "Hole spacing = 75 mm ")

For first measurement(first Hole Spacing)=(spacing Of Holes)75 /2 + 50 (insulation) = 87.5 mm(This will be the first measurement to show on DOM).

Then for all other measurements relative (determined by number of holes >element)add spacing Of Holes to first Hole Spacing and display this.

E.g 87.5 + 75 = 162.5 (this is the second hole measurement displayed)

162.5 + 75 = 237.5 (this is the third hole measurement displayed)

237.5 + 75 = 312.5 (this the third hole measurement displayed)**

    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>

Upvotes: 0

Views: 106

Answers (1)

Mark McKeon
Mark McKeon

Reputation: 149

Thanks to all who helped me, I have solved this now! I think by explaining it and typing it down helped me make sense of it and write the code. I ended up using a while loop instead.

    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;

    }

Upvotes: 1

Related Questions