Dynamically adding label to HTML form javascript

Question

Hey guys so I was given this practical question in my university and I need some help trying to figure out somethings.

So this is the question given:

Display the radius and the ratio of area to circumference for all circles with integer radii beginning with a radius of 1 and continuing while the ratio is less than 30

The output wanted is:

Radius: 1, ratio: 0.5

Radius: 2, ratio: 1

Radius: 3, ratio: 1.5

Radius: 4, ratio: 2

Radius: 5, ratio: 2.5 . . . . . . . . . // Continue until condition is met

These are my codes : (http://pastebin.com/0pgp0Bzj)

var radius=1, area, circum, ratio=0;;
            var radiusRef = document.getElementById("RadiusOutput");
            var ratioRef = document.getElementById("RatioOutput");
            var radiusOutput = "", ratioOutput = "";
            
            var newRatioLabel = document.createElement("Label");
            

    while (ratio<30)
        {
        circum = 2 * Math.PI  * radius;
        area = Math.PI * (radius * radius); 
        ratio = area/circum;                
        radiusOutput = radius;
        ratioOutput = ratio + "<br/>"

        // NEED TO DYNAMICALLY ADD TWO NEW LABELS HERE SO THAT MY RADIUS AND RATIO WILL BE PRINTED ON THE FOLLOWING LINE AS PER                 LOOP
        var newLabel = document.createElement("label");
        newLabel.appendChild("")


        radius = radius + 1;
        }

    radiusRef.innerHTML = radiusOutput;
    ratioRfef.innerHTML = ratioOutput;

#outputArea {
    padding: .25em;
    border: solid black 2px;
    margin: 3em;
    height: 20em;
    width: 20em;
    overflow-y: scroll;
    font-family: consolas, 'courier new', monospace;
    font-size: 1em;
    color: rgb(50, 50, 250);
    background-color: rgb(225,225,225) ;
}

<div id="outputArea">
<p> Radius:
  <label id="RadiusOutput"></label>
  , ratio:
  <label id="RatioOutput"></label> 
</p>
</div>

I want to dynamically add the labels for value of radius and ratio everytime my code is looped. If I am not mistaken it has something to do with createElement and appendChild but I can't seem to wrap my head around that concept (I am really noob at javascript and html)

Post the code you have in your question, not in a link to a third party site — j08691, Mar 14 '17 at 13:56

score 0 · Answer 1 · edited May 23 '17 at 12:17

0

You are using append child in wrong way. Read from here first.

edited May 23 '17 at 12:17

Community

1
1

answered Mar 14 '17 at 14:04

Jimish Fotariya

1,004
8
21

score 0 · Answer 2 · answered Mar 14 '17 at 14:17

To create a new label element,

//radius and ratio variables are considered computed

let mylabel = document.createElement('Label');
let labelValue = document.createTextNode("Radius :" + radius + " Ratio: " + ratio); 
mylabel.appendChild(labelValue);
document.getElementById('RatioOutput').appendChild(mylabel);

Dynamically adding label to HTML form javascript

2 Answers2