Javascript （表面上）相互依赖的HTML'；id'；属性 概述

大家好。我试图教自己一些HTML/CSS/JavaScript，我遇到了一些让我觉得我误解了HTML中“id”属性的用途和功能的一个或多个方面的东西

在下面的部分中，我概述了我试图完成的任务、代码的相关部分以及（从我的角度来看）得到的意外结果

提前感谢您分享您的想法和专业知识；到目前为止，在我的编码之旅中，这个网站及其社区对我来说非常有价值

我想要完成什么？ 预期功能
单击该按钮时，我希望它触发我的numberChange（）函数，该函数将myNumber变量转换为两位小数，并将其存储在justTwoDecimals变量中

预期显示
然后，我希望justTwoDecimals的值单独显示在屏幕上（即，我不希望显示更长的myNumber）

我的代码

var myNumber=5.1234567；
var justTwoDecimals=0；
函数编号更改（）
{
justTwoDecimals=parseFloat（myNumber）.toFixed（2）；
document.getElementById（“myNumber”）.innerHTML=myNumber；
document.getElementById（“justTwoDecimals”）.innerHTML=justTwoDecimals；
}
点击这里
只有两位小数的数字

带有更改的结果

当我在第28行添加代码时，justTwoDecimals值按预期填充，但不幸的是，myNumber值现在可见，用数字阻塞了屏幕：）



26。点击这里
27
28.  长数值
单击按钮

29.  只有两位小数的数字
单击按钮


我的问题
答案可能就在眼前，但为什么我的数字值需要出现在屏幕上才能正确填充两个小数

我认为无论屏幕上是否出现任何值，numberChange（）函数的整个过程都始终在运行

再次感谢
 问题在于这一行：

document.getElementById("myNumber").innerHTML=myNumber;

在原始示例中，没有具有
id=“myNumber”
的元素，因此，您试图获取一个不存在的元素，它抛出一个错误，并停止执行函数，下一行永远不会运行

如果删除该行，则会得到预期的结果。上一行计算要显示的值，下一行显示DOM中的值


var myNumber=5.1234567；
var justTwoDecimals=0；
函数编号更改（）{
justTwoDecimals=parseFloat（myNumber）.toFixed（2）；
document.getElementById（“justTwoDecimals”）.innerHTML=justTwoDecimals；
}
点击这里
只有两个小数的数字

单击按钮
26. <button type="button" onClick="numberChange()">Click Here</button>
27.
28. <p><u>Long Number Value</u><br><a id="myNumber">Click The Button</a></p>
29. <p><u>Number With Just Two Decimals</u><br><a id="justTwoDecimals">Click the Button</a></p>

document.getElementById("myNumber").innerHTML=myNumber;