classList add / remove active class onclick not kept

JavaScript
1

Hi, I’m trying to add a class to button when clicked.
I see the added class - .active - momentarily when I click the button, but then the button reverts to original state.
How can I keep the .active class after clicking?
Here’s the code:

<!DOCTYPE html>
<html>
<head>
	<script src="https://code.jquery.com/jquery-1.7.2.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://kit.fontawesome.com/eb098350bc.js" crossorigin="anonymous"></script>
<style>
button.active {color: #CD853F;
     background-color: #EBE0DA; 
    box-shadow: inset -5px -5px 9px rgba(255,255,255,0.45), inset 5px 5px 9px rgba(94,104,121,0.3);    
    border: #EBE0DA solid 1px;  
    font-size: 1.6vw;} 
    .fixed-header {
        top: 0;
        height: 8vh;
        width: 100%;
        background:  #DBD5CD;
    }

#mnubox {
  display: inline-flex;
  position: fixed;
  left: 27vw;
  top: 1vh;
  flex-wrap: wrap;
  width: 25vw;
  justify-content: space-between;  /* space-evenly */
  background:  #DBD5CD;
}

.mnuitem {
  max-width: 15vw;
  display: inline;
  padding: 5px;
  color: #85786F;
  max-height: 7vh;
font-family: 'Handlee', serif; 
  font-size: 1.5vw;
  line-height: 1.1rem;
  text-align: center;
  border-radius: 5%;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px;
}

.mnuitem:hover {color: #CD853F;
                 }
.mnuitem:first-child {
                          max-width: 7vw;}      
.mnuitem:nth-child(2)  {
                          max-width: 11vw;}      
.mnuitem:nth-child(3)  {
                          max-width: 7vw;}      
</style>
</head>
<body>

<div class="fixed-header">  
<div id="mnubox">  <!--  div menu items  -->
  <button class='mnuitem active' id='mnuit1' onclick="act1()"><a href="index.php?med=oil">Oil on Canvas</a></button> 
  <button class='mnuitem' id='mnuit2' onclick="act2()"><a href="index.php?med=acrylic">Acrylic, Pencil, Water Color</a></button> 
</div>
<script>

function act1() {
        document.getElementById("mnuit2").classList.remove("active")
        document.getElementById("mnuit1").classList.add("active")				  
			  }	 
function act2() {
        document.getElementById("mnuit2").classList.add("active")
        document.getElementById("mnuit1").classList.remove("active")				  
			  }	  			  
</script>
</body>
</html>

Any help much appreciated

2

That’s because having the link inside the button causes the link to fire AFTER the button click works.

So it is

  1. Firing the onclick action for mnuit2
  2. Executing act2()
  3. Going to index.php?med=acrylic

If you’re going to go to index.php anyway, then the javascript is not needed. Change the index.php to look at the med parameter to decide which button gets the active class assigned to it when rendering the page.

If the plan is to reload the page via ajax, then your code is OK, but the links have to be removed and code will need to be added to access the page and pull in what you want.

1 Like
3

In case it wasn’t clear it’s not allowed in html to nest interactive content such as buttons or anchors inside other interactive content. You can’t nest a button inside an anchor (or vice versa) or indeed you can’t next a button inside a button nor an anchor inside an anchor.

It makes no sense anyway when you think about it logically. If you want the look of a button but you want an href then just style the anchor to look like a button.

1 Like
4

Hi I now have the following code:

    <button class='mnuitem' id="mnuit1" onclick="act1()">Oil on Canvas</button>
<script>
function act1() { 
  
// add query parameter to url and reload page        
if ('URLSearchParams' in window) {
    var searchParams = new URLSearchParams(window.location.search);
    searchParams.set("med", "oil");
    window.location.search = searchParams.toString();
}

// after reload remove hash parameters from url
window.location.href.substr(0, window.location.href.indexOf('#')) 

// after reload scroll to top pf page (animate slow not important)
$("a[href='#top']").click(function() {
  $("html, body").animate({ scrollTop: 0 }, "slow");
  return false;
});

// after reload add and remove active class
       document.getElementById("mnuit1").classList.add("active")
        document.getElementById("mnuit2").classList.remove("active")
		}

Only the URLSearchParams works ok.
The rest of function act1() is totally ignored, how can I ensure that all the actions are implemented?
Thanks for any help

5

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.