（貌似）相互依赖 HTML 'id' 属性

Question

概览

大家好。我正在尝试自学一些 HTML/CSS/JavaScript，但我已经运行了解一些东西，这让我认为我误解了 'id' 属性的目的和功能的一个或多个方面在 HTML.

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

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

我想要完成什么？

预期功能
当我单击该按钮时，我希望它触发我的 numberChange() 函数，该函数将 myNumber 变量转换为两位小数并将其存储在justTwoDecimals 变量。

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

我的代码

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>

<script type="text/javascript">

    var myNumber = 5.1234567;
    var justTwoDecimals = 0;


function numberChange()
{
    justTwoDecimals= parseFloat(myNumber).toFixed(2);
    document.getElementById("myNumber").innerHTML=myNumber;
    document.getElementById("justTwoDecimals").innerHTML=justTwoDecimals;
}

</script>

<button type="button" onClick="numberChange()">Click Here</button>


<p><u>Number With Just Two Decimals</u><br><a id="justTwoDecimals">Click the Button</a></p>

</body>
</html>

意外结果

没有变化的结果
使用上面的代码，我单击按钮，但 'Click the Button' 文本没有响应，并且没有按预期转换为“5.12”。
FirstResult

有变化的结果
当我在第 28 行添加代码时，justTwoDecimals 值按预期填充，但不幸的是 myNumber 值现在可见，用数字 :)
SecondResult

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>

我的问题

答案可能就在眼前，但为什么 myNumber 值需要出现在屏幕上才能 justTwoDecimals 正确填充？

我认为整个 numberChange() 函数总是运行ning，无论屏幕上是否出现任何值。

再次感谢！

Answer 1

问题出在这一行：

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

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

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

中的值

var myNumber = 5.1234567;
var justTwoDecimals = 0;

function numberChange() {
  justTwoDecimals = parseFloat(myNumber).toFixed(2);
  document.getElementById("justTwoDecimals").innerHTML = justTwoDecimals;
}

<button type="button" onClick="numberChange()">Click Here</button>

<p>Number With Just Two Decimals</p>
<p id="justTwoDecimals">Click the Button</p>

更改后的结果 示例运行，因为您将 myNumber 添加到 DOM，没有抛出异常，并且 justTwoDecimals元素得到更新。

（貌似）相互依赖 HTML 'id' 属性

(Seemingly) Interdependent HTML 'id' Attributes

javascript

html

parsing

button

decimal

概览

我想要完成什么？

我的代码

意外结果

我的问题