如何使用 javascript 變量更改 html 文件中的文本？

Question

我有一個 html 文件“lobby.html”和一個 js 文件“lobby.js”

如果這是在大廳。html，

<body>
    <span id="lobbyCode"></span>
</body>

這是在 lobby.js 中，

var lobbyCode = "abcdefg";

如何使 html 文件顯示“abcdefg”？

Answer 1

在您的 html 文件中，您需要導入外部 js 文件。
在結束正文標記上方寫下以下行，以確保它可以看到所有 html 元素。
注意：考慮到 src 屬性值處的文件路徑取決於您的文件結構。

<script src="lobby.js"></script> 
</body>

你也可以把它放在你的 header

<head> 
    <script src="lobby.js"></script> 
</head>

然后在您的外部 js 文件中，您現在可以使用 document.getElementById 選擇器訪問 html 文件內部，您可以通過將 innerHTML 屬性設置為變量的值來更新其值

外部 JS 文件

var lobbyCode = "abcdefg";
document.getElementById("lobbyCode").innerHTML = lobbyCode;

 var lobbyCode = "abcdefg"; document.getElementById("lobbyCode").innerHTML = lobbyCode;

 <body> <span id="lobbyCode"></span> </body>