Question

我有一些js代码是从另一个文件中导入的，其中包含一个变量，我想在我的HTML文件中进行更新。如何在不将js代码粘贴到HTML文件中的情况下更新变量？

JS（script.js）：

var link = "https://example.com"
var codeBlock = `...some html code... ${link} ...some more html code`;

document.getElementById("div").innerHTML = codeBlock

HTML：

<div id="div"></div>
<script src= "script.js"></script>
<script>
    //I want to change this variable
    var link = "https://anotherexample.com"
</script>

Answer 1

在代码的第一行，您声明link并为其赋值。

在第二行，使用该值。

您不能更改link 以后并影响过去读取和使用该值时发生的情况。

如果要更改最终结果，则必须更改最终结果（即，您需要为document.getElementById("div").innerHTML分配一个新值）。

Answer 2

您正在获取值，但未将其设置为HTML所显示的变量。这是您要寻找的：

var updatedLink = document.getElementById("anotherlink").innerHTML;
var codeBlock = `...some html code... ${updatedLink} ...some more html code`;

document.getElementById("div").innerHTML = codeBlock

<div id="div"></div>
<div id="anotherlink" style="display:none"></div>
<script src= "script.js"></script>
<script>
    var link = "https://anotherexample.com";
    document.getElementById("anotherlink").innerHTML = link
</script>

Answer 3

您的脚本正在运行，并且变量正在更改。如果在再次声明之后console.log(link)，您将看到变量已更改。如果您希望脚本再次执行，那么必须再次调用它。

您可能想尝试的是遍历文档，寻找触发该语句的内容，例如文档中的链接。

const links = document.querySelectorAll('a');  
var href = [];
links.forEach(link => href.push(link.href));
var codeBlock = '';

href.forEach(link => {
  if (link == "https://stacksnippets.net/anotherexample.com") {
    codeBlock = `...some html code... ${link} ...some more html code`;
    document.getElementById('div').innerHTML = codeBlock;
  }  
})

<div id="div"><a href="anotherexample.com">link</a></div>

或者不检查特定的URL：

const links = document.querySelectorAll('a');  
var href = [];
links.forEach(link => href.push(link.href));
var codeBlock = '';

href.forEach(link => {
  codeBlock = `...some html code... ${link} ...some more html code`;
  document.getElementById('div').innerHTML = codeBlock;     
})

<div id="div"><a href="anotherexample.com">link</a></div>

从html文件中的js文件更新变量

3 个答案: