如何在 JavaScript 中实现点击事件？

Question

I select a span element on the page. For the first click, I want it to link to another page. On the second click, I want it to return to the original page.

For example, I have a link with example.com , which is the original. When this element "abcd" is clicked I want it to link to example.com/ar , and when it's clicked again I want it to go back to example.com .

document.querySelector('span.arb').addEventListener('click', function() {
  a.href="example.com";
})

How do I complete this using the above?

Answer 1

Try this:

 let count = 0; document.querySelector('span.arb').addEventListener('click', function () { count++; document.querySelector('a').href = "http://example.com"; if (count == 1) { document.querySelector('a').href = "http://example.com/ar"; } else { document.querySelector('a').href = "http://example.com"; } });

 <a href="http://example.com">Link</a> <span class="arb">Click Me</span>

Answer 2

you can get link and change her after click

document.querySelector('span.arb').addEventListener('click', toogle)

function toogle(){
if( document.querySelector('span.arb').href === "domain.com"){
document.querySelector('span.arb').href = "domain.com/link"
} else if (document.querySelector('span.arb').href === "domain.com/link"){
document.querySelector('span.arb').href = "domain.com"
}

Answer 3

Hold the link in a data attribute and use that to toggle.

 document.querySelector("[data-toggleHref]").addEventListener("click", function(){ //Get the link element var a = document.querySelector("a"); var current = a; //Log to demontrate only console.log(this.dataset.togglehref); //Update the link a.href = this.dataset.togglehref; //Set the data attribute for toggle this.dataset.togglehref = current; });

 <a href="/pagea.html" id="target">Link</a> <span data-toggleHref="/pageb.html">Click Me</span>

Answer 4

try this code:

document.querySelector('span.arb').addEventListener('click', function() {
  if(a.href == "example.com") {
     a.href="example.com/ar"; 
  } else {
     a.href="example.com"; 
  }
})

or a shorter answer using ternary operator:

document.querySelector('span.arb').addEventListener('click', function() {
  a.href = a.href == "example.com" ? "example.com/ar" : "example.com";
})