How to fix parent div unfocusing when clicking child button while parent div is focussed-CodePudding

I have a portfolio website with some of my projects showcased on there and I'm trying to make a button in the project page that returns the user to the portfolio page when clicked. My only problem is that the parent div element loses focus when I try to click the child button instead of directing the user to the portfolio page. How do I make the parent div stop losing focus on child button click? I've tried focussing the button element in javascript but that didn't seem to make a difference.

document.getElementById('portfoliobackarrowwrapper').onclick = function () {
  document.getElementById('portfoliobackcontainer').focus();
  document.getElementById('portfoliobackarrow').focus();
};

div.portfoliobackcontainer {
    position: fixed;
    width: 120px;
    height: 60px; 
    background-color: white;
    z-index: 2;
    margin-left: -130px;
    margin-top: 50px;
    border: 1px solid rgb(185, 185, 185);
    display: block;
    animation: portfoliobackanim .0001s linear;
}
  
button.portfoliobackbutton {
    background-color: orange;
    border: 1px solid rgb(214, 139, 0);
    border-radius: 5px;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 15px;
    padding-right: 15px;
    color: white;
    font-family: 'Inter', sans-serif; 
    font-size: medium;
    margin-left: 10px;
    margin-top: 7.5px;
}

button.portfoliobackbutton:hover {
    border: 1px solid rgb(255, 166, 0);
    background-color: rgb(255, 184, 53);
    color:white;
    transition: all .25s linear;
    cursor: pointer;
}

div.portfoliobackarrowwrapper {
    border: 1px solid rgb(185, 185, 185);
    width: 35px;
    height: 60px;
    margin-left: 120px;
    margin-top: -51px;
    background-color: white;
}

div.portfoliobackarrow {
    background: none;
    border-bottom: 3px solid grey;
    border-right: 3px solid grey;
    width: 20px;
    height: 20px;
    transform: rotate(315deg);
    border-radius: 2px;
    transition: .05s linear;
    margin-top: 17.5px;
    animation: portfolioarrowrotate 0.0001s linear;
}

div.portfoliobackarrowwrapper:hover {
    cursor: pointer;
}

div.portfoliobackarrowwrapper:hover div.portfoliobackarrow{
    border-bottom: 3px solid orange;
    border-right: 3px solid orange;
    transition: all .1s linear;
}

div.portfoliobackcontainer:focus {
    animation-fill-mode: forwards 
}

div.portfoliobackcontainer:focus div.portfoliobackarrow{
    animation-fill-mode: forwards;
}

@keyframes portfoliobackanim {
    to{
        margin-left: 0px;
    }
}

@keyframes portfolioarrowrotate {
    to {
        transform: rotate(135deg);
        margin-left: 10px;
    }
}

 <div tabindex="-1"  id="portfoliobackcontainer">
        <button  onclick="window.location='../index.html';">Portfolio</button>
        <div tabindex="-1"  id="portfoliobackarrowwrapper">
        <div  id="portfoliobackarrow"></div>
        </div>
    </div>

CodePudding user response：

Beside the problem you have, your code needs to be re-written, maybe not now but in the future once you get more experience.

Let me give you some tips on improving your code:

You can't focus 2 elements, or the previous one loses focus.
When you redirect to another page use anchor tag a and button for other interactions.
Instead of focusing the element, why not give it a class for that specific task.
Try to improve your classes to work without tag names like div.class to .class only. This may break your styles now but take it as advice.
Adopt BEM naming system for classes, it looks soo messy.

So for now, use this solution:

Replace JavaScript code with this:

const backArrowElement = document.getElementById('portfoliobackcontainer')
const backArrowFocusedClass = 'portfoliobackcontainerfocused'

// Toggle `focused` class.
backArrowElement.addEventListener('click', function() {
  if (this.classList.contains(backArrowFocusedClass)) {
    this.classList.remove(backArrowFocusedClass)
  } else {
    this.classList.add(backArrowFocusedClass)
  }
})

And in CSS file replace class div.portfoliobackcontainer:focus with div.portfoliobackcontainerfocused

See the full code here:

const backArrowElement = document.getElementById('portfoliobackcontainer')
const backArrowFocusedClass = 'portfoliobackcontainerfocused'

// Toggle `focused` class.
backArrowElement.addEventListener('click', function() {
  if (this.classList.contains(backArrowFocusedClass)) {
    this.classList.remove(backArrowFocusedClass)
  } else {
    this.classList.add(backArrowFocusedClass)
  }
})

div.portfoliobackcontainer {
    position: fixed;
    width: 120px;
    height: 60px; 
    background-color: white;
    z-index: 2;
    margin-left: -130px;
    margin-top: 50px;
    border: 1px solid rgb(185, 185, 185);
    display: block;
    animation: portfoliobackanim .0001s linear;
}

button.portfoliobackbutton {
    display: inline-block;
    background-color: orange;
    border: 1px solid rgb(214, 139, 0);
    border-radius: 5px;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 15px;
    padding-right: 15px;
    color: white;
    font-family: 'Inter', sans-serif; 
    font-size: medium;
    margin-left: 10px;
    margin-top: 7.5px;
}

button.portfoliobackbutton:hover {
    border: 1px solid rgb(255, 166, 0);
    background-color: rgb(255, 184, 53);
    color:white;
    transition: all .25s linear;
    cursor: pointer;
}

div.portfoliobackarrowwrapper {
    border: 1px solid rgb(185, 185, 185);
    width: 35px;
    height: 60px;
    margin-left: 120px;
    margin-top: -51px;
    background-color: white;
}

div.portfoliobackarrow {
    background: none;
    border-bottom: 3px solid grey;
    border-right: 3px solid grey;
    width: 20px;
    height: 20px;
    transform: rotate(315deg);
    border-radius: 2px;
    transition: .05s linear;
    margin-top: 17.5px;
    animation: portfolioarrowrotate 0.0001s linear;
}

div.portfoliobackarrowwrapper:hover {
    cursor: pointer;
}

div.portfoliobackarrowwrapper:hover div.portfoliobackarrow{
    border-bottom: 3px solid orange;
    border-right: 3px solid orange;
    transition: all .1s linear;
}

div.portfoliobackcontainerfocused {
    animation-fill-mode: forwards 
}

div.portfoliobackcontainerfocused div.portfoliobackarrow{
    animation-fill-mode: forwards;
}

@keyframes portfoliobackanim {
    to{
        margin-left: 0px;
    }
}

@keyframes portfolioarrowrotate {
    to {
        transform: rotate(135deg);
        margin-left: 10px;
    }
}

<div tabindex="-1"  id="portfoliobackcontainer">
  <button  onclick="window.location='../index.html';">Portfolio</button>
  <div tabindex="-1"  id="portfoliobackarrowwrapper">
    <div  id="portfoliobackarrow"></div>
  </div>
</div>