CODEWITHSUNDEEP
javascript
evul
evul

Reputation: 45

Is there a way to have active/inactive state on a single link?

I will need to put 2 different actions on a single link which would have an active/inactive state, right now I only know how to do one at the time, something like this (active):

<a href="#" onclick="ShowOneState('state_One', gameInstance);" style="active">State One</a>

And I would like to have another one on same click (inactive), is there a way to have this dynamically changed? The label shouldn't change, except for color for example - style.

On the other side, it would be a great thing if I could show the list of active items as well, something like:

Active states: State one, State two, State ...

Upvotes: 0

Views: 518

Answers (3)

John3136
John3136

Reputation: 29266

@shandoe2020 has a good answer but here is the "old way" which is pretty easy to understand too. It can be adapted to links (or anything else) quite easily.

<!DOCTYPE html>
<html>
<head>
<style>
  .my-button { width:150px; height:150px; }
  .my-red { background-color:#ff0000; }
  .my-blue { background-color:#0000ff; }
</style>
<script>
/* toggle the state of my-red and my-blue class */
function toggle()
{
  /* yeah yeah, hardcoding the item to change is bad */
  var elem = document.getElementById("btn")
  elem.classList.toggle("my-red")
  elem.classList.toggle("my-blue")
}
</script>
</head>

<body>
  <div>
    <p><button id="btn" class="my-button my-red" onclick="toggle()">Button</button></p>
  </div>

</body>
</html>

Upvotes: 0

evul
evul

Reputation: 45

I think I got it to work, here's my code, please let me know if good enough.

A href:

<a href="#" onclick="toggleState(this)">State One</a>

js:

<script>
function toggleState(a) { 

    if ( a.className === 'visible' ) {

        HideOneState('state_One', gameInstance);
        a.className = '';

    } else {

        ShowOneState('state_One', gameInstance);
        a.className = 'visible';

    }

}
</script>

Upvotes: 0

shadow2020
shadow2020

Reputation: 1351

I recommend something other than an A tag for what you're doing. I also recommend the modern equivalent of an onclick, an event listener. I also recommend assigning and toggling the class.

<a href="#" id="myElem" class="class123" style="active">State One</a>

I have removed your onclick and put it into an event listener. I've added a class, so you can toggle it. 

function classToggle() {
    this.classList.toggle('class123');
    this.classList.toggle('class456');
}

This toggles your class, thus allowing you to change the behavior of the link based on the class. Active/Inactive or Class123/Class456 whatever you want to use will work. 

document.querySelector('#myDiv').addEventListener('click', classToggle);

This is your listener. It applies the classToggle function on click. You can do this with a div/button/whatever. Personally I'd change the A tag to a Div. 

<div id="myElem" class="class123">click here</div>

And here is an example of this stuff working and changing based on the toggle and classes. 

function classToggle() {
    this.classList.toggle('class123');
    this.classList.toggle('class456');
    
}
document.querySelector('#myElem').addEventListener('click', classToggle);
document.querySelector('#myElem').addEventListener('click', mogrify);

function mogrify(){

if (document.querySelector('#myElem').classList.contains('class123')) {
    document.querySelector('#myElem').style.backgroundcolor = "#54C0FF"
 document.querySelector('#myElem').innerText = "State Two";
} else {
 document.querySelector('#myElem').style.backgroundcolor = "#FF8080"
  document.querySelector('#myElem').innerText = "State One";
}



}
.class123 {
    color: #f00;
}

.class456 {
    color: #00f;
}
<a href="#" id="myElem" class="class456" style="active">State One</a>

Upvotes: 1

Related Questions