如何使用<a>标记中的</a> onclick（）从另一个脚本更改变量

Question

I have a script called main.js that is attached to index.html. I have an onclick() function set up within index.html that needs to change the value of a variable. This question would be easy if the script was written with script tags, however, despite trying to figure it out, I'm not sure how to do it when the script is referenced via a script tag. The code isn't really relevant to the question, but here's the line anyway.

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

card is a variable in main.js which needs to be changed. In main.js, before the onclick() event, card is set to NULL. Thanks so much.

Answer 1

Write a function in the home.js and inside the function you can access and change the href variable.

html should be like this

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

in thee function add this line

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

Answer 2

You can write function in script tags or in main.js, and call it onclick

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

Answer 3

I think your code is fine in terms of syntax, because if the main.js file is linked to the same html where this line is, then card is a global variable that you could override without any problem.

Though the problem in this case might be other, because you are changing that variable when user clicks an anchor tag which is pointing to a main.html file in its href attribute.

So what will actually happen is that two event handlers will be executed, the first one will be your code changing the value of that variable and the second will actually redirect your window to another html file, changing the actual context of your current window and making its global variables no longer useful, and that makes no sense.

If you want to do something in js before navigating somewhere else then you would need to attach an event handler to the anchor element and call event.preventDefault() method to prevent the default behavior of the anchor tag when it is clicked, in other words, prevent navigation. That would look something like this:

// 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
})