Question

嘿伙计们，所以我在大学里得到了这个实际问题，我需要一些帮助来找出事情。

所以这是给出的问题：

显示所有圆的半径和面积与圆周的比率，整数半径从半径1开始，并在比率小于30时继续

想要的输出是：

半径：1，比率：0.5

半径：2，比率：1

半径：3，比率：1.5

半径：4，比率：2

半径：5，比率：2.5。。。。。。。。。 //继续，直到满足条件

这些是我的代码：（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>

每次我的代码循环时，我想动态添加radius和ratio值的标签。如果我没有弄错，它与createElement和appendChild有关，但我似乎无法理解这个概念（我在javascript和html中真的很棒）

Answer 1

您正在以错误的方式使用追加儿童。首先阅读here。

Answer 2

要创建新的标签元素，

//半径和比率变量被视为计算

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

动态添加标签到HTML表单javascript

2 个答案: