Add/Replace border with onclick

  • A+
Category:Languages

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>


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>

Comment

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: