Logo Questions Linux Laravel Mysql Ubuntu Git Menu
HTML CSS JAVASCRIPT SQL PYTHON PHP BOOTSTRAP JAVA JQUERY R React Kotlin
 

Add/Replace border with onclick

Tags:

javascript

html

css

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>
like image 549
Korkrane Avatar asked May 01 '18 04:05

Korkrane

2 Answers

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>
like image 107
Obsidian Age Avatar answered Oct 25 '22 23:10

Obsidian Age

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>

like image 22
Akash Avatar answered Oct 25 '22 23:10

Akash
Sign in to Comment

Related questions

Redirect to another path in Node JS route
Webpack + Express + EJS: Error: Cannot find module "."
How to use ng-repeat:Angularjs?
Gulp - Cannot find module 'gulp-rename'
How to disable value on the select option ? (vue.js 2)
Javascript classList.remove not working properly
React-dropzone style drop area
Setting the day of the date to the 1st with moment.js
How should I make configurable modules in Angular2
"IONIC 3" page adding html content variable
SyntaxError: Unexpected token C in JSON at position 0 - Ionic 2 Http GET request
ES6 Class - Call method from within event handler
how to change the Y-axis values from float number to integer in chartjs?
Error Vue.js "Cannot read property 'props' of undefined"
Close Electron app on click event
How to print a space between each word in an array
how to fix property does not exist on type 'Object' in ionic 3?
Disable alert Message
Mapbox case expression
Pass dynamic data to router-link.

Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!