如何在 <a> 标记中使用 onclick() 从另一个脚本更改变量答案

【问题标题】：How can I change a variable from another script with onclick() in an <a> tag如何在 <a> 标记中使用 onclick() 从另一个脚本更改变量
【发布时间】：2018-08-21 13:23:19
【问题描述】：

我有一个附加到 index.html 的名为 main.js 的脚本。我在 index.html 中设置了一个 onclick() 函数，该函数需要更改变量的值。如果脚本是用脚本标签编写的，这个问题会很容易，但是，尽管试图弄清楚，但当通过脚本标签引用脚本时，我不确定该怎么做。该代码与该问题并不真正相关，但无论如何，这就是这条线。

<li><a href="main.html" onclick='card=thing;'>thing</a></li>

card 是 main.js 中的一个变量，需要更改。在 main.js 中，在 onclick() 事件之前，card 被设置为 NULL。非常感谢。

【问题讨论】：

在 main.html 中使用 script 标签或在 main.js 中编写一个函数并在点击时调用它

标签： javascript variables

【解决方案1】：

你可以在脚本标签或main.js中编写函数，并在点击时调用它

<li><a href="javascript:void(0)" onclick='changeCard("thing")'>thing</a></li>
<script type="text/javascript">
    function changeCard(val) {
        card = val;
    }
</script>

【讨论】：

我不得不说，在你看到你的评论建议之后，我就是这样做的，没有看到这个回复，到函数名和所有内容，我不会撒谎，我有点害怕。非常感谢您的帮助。
@Zanolon 我也预料到了。

【解决方案2】：

在 home.js 中编写一个函数，在函数内部你可以访问和更改 href 变量。

html应该是这样的

<li><a  id="variable" href="main.html" onclick='card=thing;'>thing</a></li>

在你的函数中添加这一行

document.getElementById("variable").href="your reference";

【讨论】：

【解决方案3】：

我认为您的代码在语法方面很好，因为如果 main.js 文件链接到该行所在的同一个 html，那么 card 是一个全局变量，您可以毫无问题地覆盖它。

虽然这种情况下的问题可能是其他问题，因为当用户单击指向其 href 属性中的 main.html 文件的锚标记时，您正在更改该变量。

所以实际上会发生两个事件处理程序将被执行，第一个将是您的代码更改该变量的值，第二个实际上会将您的窗口重定向到另一个 html 文件，更改当前的实际上下文窗口并使其全局变量不再有用，这是没有意义的。

如果您想在导航到其他地方之前在 js 中做某事，那么您需要将事件处理程序附加到锚元素并调用 event.preventDefault() 方法以防止单击锚标记时的默认行为，在其他情况下话，防止导航。看起来像这样：

// Js code:
var anchor = document.querySelector('a')
anchor.addEventListener('click', function(event) {
    event.preventDefault()
    // Do the stuff you want to do on click here, before navigating, etc
    card = thing

    // ... explicitly navigate
})

【讨论】：