0

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

JS（脚本.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>
4

3 回答 3

1

您正在获取该值，但没有将其设置为 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>

于 2019-04-01T13:26:37.357 回答
1

在你的代码的第一行，你声明link并给它一个值。

在第二行，您使用该值。

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

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

于 2019-04-01T13:11:00.453 回答
0

您的脚本正在运行，并且正在更改变量。如果你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>

于 2019-04-01T13:38:33.997 回答