动态添加label到HTML形成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)

Answer 1

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

Answer 2

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