我想问一下getElementbyId

Question

In my code, I wanted to show the following text: "(User) is 153cm tall and weighs 37 kilograms. That qualifies as underweight"

My code is as below. It's not supposed to work but some magic it works except for name.

function gogogo() {
    let x=document.getElementById("height").value/100;
    let y=document.getElementById("weight").value;

    let BMI=y/Math.pow(x,2);

    document.getElementById("output").innerText = Math.round(BMI*100)/100;

    let answer;
    if (BMI<18.5)
        answer = "Underweight";
    else if (BMI<=25)
        answer = "Normal";
    else if (BMI<=30)
        answer = "Obese";
    else
        answer = "Overweight";

    document.getElementById("answer").innerText = `"${name} is ${height.value} tall and ${weight.value} kilograms. That qualifies as ${answer}"`;
}

instead of

document.getElementById("height")`

Apparently one can simply write:

height

What's the problem? Can you guys help me to fix it?

Answer 1

Javascript traverses the DOM as well insearch of an uninitialized variable. If it finds a node with the same id as the variable name, it takes the variable as the reference to that node .

Example

<div>
    <h1 id=title>My title</h1>
    <input type=text value="mi text" id=yourText />
</div>

Since the id s ['title','yourText'] appear in the DOM tree, you can call them directly ('Though not adviced').

So, calling title.innerText , would return " My title ". But calling an uninitialized variable whose id is not in the DOM as well, will give you an undefined value

Answer 2

您可以尝试使用innerHTML代替innertext