CODEWITHSUNDEEP
javascripthtmlcss
user9724002
user9724002

Reputation:

Add/Replace border with onclick

Beginner here,

I'm currently trying to show a border around buttons every time I click on them.

Theborder would appear quarter by quarter (or 1/3) with the same onclick="myFunction(). I don't get it. How could I properly do it without using a new css class (here: .test_skill) ? I've tried to replace or modify the actual border in .btn but it's not doing anything.

My .html file is :

 <!DOCTYPE html>
    <html>
    <head>
    <script type="text/javascript" src="testborder.js"></script>
    <link rel="stylesheet" type="text/css" href="testbutton.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin="anonymous">
    </head>
    <body>
        <button class="btn"><i class=" fas fa-shipping-fast fa-inverse"></i></button>

        <button class="btn"><i class=" fas fa-address-card fa-inverse"></i></button>

        <!-- ici fa-inverse manquant -->
        <button class="btn"><i class=" fas fa-camera-retro"></i></button>

        <div id="skill_unlocked" onclick="myFunction()">
            <button class="btn"><i class="fas fa-flag fa-inverse"></i></button>
        </div>

        <button class="btn"></button>

    </body>
    </html>

My .css file is :

 body{
    background-color: #575757;
    }

.btn{
    margin: 10px;
    display: block;
    opacity: 0.6;
    border: 5px hidden;
    background-color: grey;
    border-radius: 50%;
    cursor: pointer;
    height: 70px;
    width: 70px;
    outline: none;
    }

.btn:hover{
    opacity: 0.9;
    background-color: #2B2B2B;
}

.fas{
    font-size: 28px;
}

.test_skill{
}

My .js file is : 

function myFunction()
{
    document.getElementById('skill_unlocked').setAttribute("class", ".test_skill");
}

Bonus question : I'm not sure about the structure I've choose for my button with the<div>,<button>,<i> and <a> tags.I think that I'll have problems with it later becuase of the class tags a bit randomly placed. And it will not fit to what I want on thecss.file

function myFunction()
{
    document.getElementById('skill_unlocked').setAttribute("class", ".test_skill");
}
body{
    background-color: #575757;
    }

.btn{
    margin: 10px;
    display: block;
    opacity: 0.6;
    border: 5px hidden;
    background-color: grey;
    border-radius: 50%;
    cursor: pointer;
    height: 70px;
    width: 70px;
    outline: none;
    }

.btn:hover{
    opacity: 0.9;
    background-color: #2B2B2B;
}

.fas{
    font-size: 28px;
}

.test_skill{
}
<!DOCTYPE html>
    <html>
    <head>
    <script type="text/javascript" src="testborder.js"></script>
    <link rel="stylesheet" type="text/css" href="testbutton.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin="anonymous">
    </head>
    <body>
        <button class="btn"><i class=" fas fa-shipping-fast fa-inverse"></i></button>

        <button class="btn"><i class=" fas fa-address-card fa-inverse"></i></button>

        <!-- ici fa-inverse manquant -->
        <button class="btn"><i class=" fas fa-camera-retro"></i></button>

        <div id="skill_unlocked" onclick="myFunction()">
            <button class="btn"><i class="fas fa-flag fa-inverse"></i></button>
        </div>

        <button class="btn"></button>

    </body>
    </html>

Upvotes: 8

Views: 9874

Answers (8)

Rich
Rich

Reputation: 3336

There are a few good ways to do something like this. That said, I'd suggest using something other than an inline onclick attribute.

In this solution, I used jQuery and added an animation to the border with CSS. This gives the effect of the border appearing quarter by quarter as per your OP and additional comments. You can play with the animation keyframes to get the border to appear in thirds, make it thicker, etc.

Edit: I made the border remain by adding the animation-fill-mode CSS property and inserting the "filled" border segments at each keyframe in the animation.

Hope this helps!

$('.btn').on('click', function() {
  $(this).addClass('test_skill');
  $(this).on('oanimationend webkitAnimationEnd msAnimationEnd animationend', function() {
    //$(this).removeClass('test_skill');
  });
})
body {
  background-color: #575757;
}

.btn {
  margin: 10px;
  display: block;
  opacity: 0.6;
  border: none;
  background-color: grey;
  border-radius: 50%;
  cursor: pointer;
  height: 70px;
  width: 70px;
  outline: none;
}

.btn:hover {
  opacity: 0.9;
  background-color: #2B2B2B;
}

.fas {
  font-size: 28px;
}

.test_skill {
  animation: border .5s;
  animation-fill-mode: forwards;
}

@keyframes border {
  0% {
    border-top: 0px;
  }
  25% {
    border-top: 2px solid red;
    border-right: 0px;
  }
  50% {
    border-top: 2px solid red;
    border-right: 2px solid red;
    border-bottom: 0px;
  }
  75% {
    border-top: 2px solid red;
    border-right: 2px solid red;
    border-bottom: 2px solid red;
    border-left: 0px;
  }
  100% {
    border-top: 2px solid red;
    border-right: 2px solid red;
    border-bottom: 2px solid red;
    border-left: 2px solid red;
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>

<head>
  <script type="text/javascript" src="testborder.js"></script>
  <link rel="stylesheet" type="text/css" href="testbutton.css">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin="anonymous">
</head>

<body>
  <button class="btn"><i class=" fas fa-shipping-fast fa-inverse"></i></button>

  <button class="btn"><i class=" fas fa-address-card fa-inverse"></i></button>

  <!-- ici fa-inverse manquant -->
  <button class="btn"><i class=" fas fa-camera-retro"></i></button>

  <div id="skill_unlocked">
    <button class="btn"><i class="fas fa-flag fa-inverse"></i></button>
  </div>

  <button class="btn"></button>

</body>

</html>

Upvotes: 2

Raman Saxena
Raman Saxena

Reputation: 11

$(document).ready(function(){
		   var btn = $('.btn');
		   btn.click(function(){
		      $(btn).css('border','1px solid #000');
		      $(this).css('border','1px solid #f00');
		   })
		})
.btn {
			width: 120px;
			height: 40px;
			display: inline-block;
			outline: none;
		}
		div {
			margin: 5px 0;
		}
<html>
<head>
	<title></title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
<body>
	<button class="btn"><i class=" fas fa-shipping-fast fa-inverse"></i> Shipping</button>
	<button class="btn"><i class=" fas fa-address-card fa-inverse"></i> Address</button>
	<!-- ici fa-inverse manquant -->
    <button class="btn"><i class=" fas fa-camera-retro"></i> Camera</button>
	<div id="skill_unlocked">
        <button class="btn"><i class="fas fa-flag fa-inverse"></i>Flag</button>
    </div>
	<button class="btn">Button</button>
</body>
</html>

Upvotes: 1

Miguel Gim&#233;nez
Miguel Gim&#233;nez

Reputation: 455

Theres 2 problems: 1) Is you are calling the function setAttribute to add a class. 2) Structure doesnt make much sense , since the class you trying to add doesnt have any styles , so you can remove the

To make it work you could do this: add the on click and id attributes to the btn like so :

 <button class="btn" id="skill_unlocked" onclick="myFunction()">

and remove the border attr like this:

document.getElementById("btn").style.border = "none";

if you want to add a class you should do it like this ( but this wont do anything) :

document.getElementById("skill_unlocked").classList.add('btn');

or to remove a class (this should remove all the styles):

document.getElementById("skill_unlocked").classList.remove('btn');

Upvotes: 1

Akash
Akash

Reputation: 697

It's very simple, you can achieve it with css only. No need to use scripts for this simple task, as this make the application heavy and it won't even work if the user has disabled JS in their browser.

Please find the code below for showing border on click (for desktop like devices) and on focus (for touch devices).

<!DOCTYPE html>
<html>

<head>
  <style>
    body {
      background-color: #575757;
    }
    
    .btn {
      margin: 10px;
      display: block;
      opacity: 0.6;
      border: 5px hidden;
      background-color: grey;
      border-radius: 50%;
      cursor: pointer;
      height: 70px;
      width: 70px;
      outline: none;
    }
    
    .btn:hover {
      opacity: 0.9;
      background-color: #2B2B2B;
    }
    /*   Show border on all buttons     */
    
    .btn:active,
    .btn:focus {
      border: 2px solid red;
    }
    
    .fas {
      font-size: 28px;
    }
    /*   
         * Remove comment for section below to Show border on specific button.
         */
    /*
                #skill_unlocked:active,
                #skill_unlocked:focus {
                    border: 2px solid red;
                }
        */
  </style>
</head>

<body>
  <!DOCTYPE html>
  <html>

  <head>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin="anonymous">
  </head>

  <body>
    <button class="btn"><i class=" fas fa-shipping-fast fa-inverse"></i></button>
    <button class="btn"><i class=" fas fa-address-card fa-inverse"></i></button>
    <!-- ici fa-inverse manquant -->
    <button class="btn"><i class=" fas fa-camera-retro"></i></button>
    <button class="btn" onclick="myFunction()" id="skill_unlocked"><i class="fas fa-flag fa-inverse"></i></button>
    <button class="btn"></button>
  </body>

  </html>
</body>

</html>

Answer to bonus Question

The structure is not an issue in your case here. But, preferably use <i> within <a> if you want to create link on element within <i>

Upvotes: 3

crffty
crffty

Reputation: 444

This is some code i was paying with. I think it does what you was asking but on hover not click. Not exactly what you need but maybe some ideas. 

$( ".hvr-ripple-out-good" ).click(function() {
    $( this ).toggleClass( "fill-good" );
  });
.hvr-ripple-out-good {
  margin: 5px;
  width: 20px;
  height: 20px;
  padding: 10px;
  color: #333;
  text-align: center;
  border: 1px solid #333;
  border-radius: 50%;
}

.hvr-ripple-out-good:hover {
  color: #39CCCC;
  border-color: #39CCCC;
}

/* Ripple Out */
@-webkit-keyframes hvr-ripple-out {
  100% {
    top: -12px;
    right: -12px;
    bottom: -12px;
    left: -12px;
    opacity: 0;
  }
}

@keyframes hvr-ripple-out {
  100% {
    top: -12px;
    right: -12px;
    bottom: -12px;
    left: -12px;
    opacity: 0;
  }
}

.hvr-ripple-out-good {
  display: inline-block;
  vertical-align: middle;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
}

.hvr-ripple-out-good:before {
  content: '';
  position: absolute;
  border: rgba(0, 0, 0, 0.0) solid 2px;
  border-radius: 50%;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
}

.hvr-ripple-out-good:hover:before, .hvr-ripple-out-good:focus:before, .hvr-ripple-out-good:active:before {
  -webkit-animation-name: hvr-ripple-out;
  animation-name: hvr-ripple-out;
  border-color: #39CCCC;
  animation-fill-mode: forwards;
}

.fill-good {
  background-color: #39CCCC; 
  color: #fff;
  border: 1px solid #fff;
}

.fill-good:hover {
  color: #fff;
  border: 1px solid #fff;
}

.active {
  color: #61D6D6 !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">

<div style="padding: 100px; float: left;">

<a class="hvr-ripple-out-good"><i class="fas fa-check"></i></a>

</div>

Upvotes: 3

Obsidian Age
Obsidian Age

Reputation: 42304

A few things:

  • When adding the class test_skill programmatically, you want to omit the dot
    (you have ".test_skill").
  • You'll probably want to add onclick and the ID skill_unlocked to the <button>, rather than the full-width containing <div>. In this case, you don't need the <div> at all.
  • .setAttribute("class", ...) will actually overwrite the class(es) if you have an existing one. Instead, you really should use .classList.add("test_skill").
  • The class that you're adding is test_skill, yet you set up rules for .test_skill_unlocked. You'll want to ensure these match!

To add the border, you're looking to apply border such as:

.test_skill {
  border: 2px solid red;
}

And instead of targeting the individual element, what I would recommend is to grab all of the buttons with document.getElementsByClassName("btn"). Note that this returns a NodeList collection of elements, so you'll need to loop over them, adding an event handler to each. From here, you can use the JavaScript keyword this to refer to the button you're currently clicking on. This way, you can use the same function to add the bordered class to each button.

This can all be seen in the following:

var buttons = document.getElementsByClassName("btn");

for (var i = 0; i < buttons.length; i++) {
  document.getElementsByClassName("btn")[i].addEventListener("click", function() {
    this.classList.add("test_skill");
  });
}
body {
  background-color: #575757;
}

.btn {
  margin: 10px;
  display: block;
  opacity: 0.6;
  border: 5px hidden;
  background-color: grey;
  border-radius: 50%;
  cursor: pointer;
  height: 70px;
  width: 70px;
  outline: none;
}

.btn:hover {
  opacity: 0.9;
  background-color: #2B2B2B;
}

.fas {
  font-size: 28px;
}

.test_skill {
  border: 2px solid red;
}
<!DOCTYPE html>
<html>

<head>
  <script type="text/javascript" src="testborder.js"></script>
  <link rel="stylesheet" type="text/css" href="testbutton.css">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin="anonymous">
</head>

<body>

  <button class="btn"><i class=" fas fa-shipping-fast fa-inverse"></i></button>

  <button class="btn"><i class=" fas fa-address-card fa-inverse"></i></button>

  <!-- ici fa-inverse manquant -->
  <button class="btn"><i class=" fas fa-camera-retro"></i></button>

  <button class="btn"><i class="fas fa-flag fa-inverse"></i></button>

  <button class="btn"></button>

</body>

</html>

Upvotes: 5

Different55
Different55

Reputation: 597

Probably best to knock that out with pure CSS with the :active selector.

.btn:active {
   border: 5px solid red;
}

Example JSFiddle

Upvotes: 2

Saeed
Saeed

Reputation: 5488

Use this function

function myFunction() {
    var el = document.getElementById('skill_unlocked');
    el.classList.add("test_skill");
}

Upvotes: 2

Related Questions