How can I give a class as a parameter to function?

Question

When I give value as a parameter to function,

such like this,

<html>
  <head>
    <style rel="stylesheet">
      .A { border: 1px solid red; background-color: white }
    </style>
    <script>
      function clicked(v) {
        console.log(v);
      }
    </script>
  </head>
  <body>
    <input type="button" class="A" value="1" onclick="clicked(value)">
  </body>
</html>

It works well.

It shows me v's value.

However, when I give class as a parameter,

such like this,

<html>
  <head>
    <style rel="stylesheet">
      .A { border: 1px solid red; background-color: white }
    </style>
    <script>
      function clicked(c) {
        console.log(c);
      }
    </script>
  </head>
  <body>
    <input type="button" class="A" value="1" onclick="clicked(class)">
  </body>
</html>

It gives me an error.

I want to make it show the button's class option, "A".

How can I make it?

Possible duplicate of [get class name from element with onclick](https://stackoverflow.com/questions/17060971/get-class-name-from-element-with-onclick) — Mohammad, Nov 25 '18 at 06:10

Mamun · Accepted Answer · 2018-11-25T06:22:27.673

Try with Element.getAttribute()

getAttribute() returns the value of a specified attribute on the element. If the given attribute does not exist, the value returned will either be null or "" (the empty string);

onclick="clicked(this.getAttribute('class'))"

<html>
  <head>
    <style rel="stylesheet">
      .A { border: 1px solid red; background-color: white }
    </style>
    <script>
      function clicked(c) {
        console.log(c);
      }
    </script>
  </head>
  <body>
    <input type="button" class="A" value="1" onclick="clicked(this.getAttribute('class'))">
  </body>
</html>

OR: With Element.className

className gets and sets the value of the class attribute of the specified element.

onclick="clicked(this.className)"

<html>
  <head>
    <style rel="stylesheet">
      .A { border: 1px solid red; background-color: white }
    </style>
    <script>
      function clicked(c) {
        console.log(c);
      }
    </script>
  </head>
  <body>
    <input type="button" class="A" value="1" onclick="clicked(this.className)">
  </body>
</html>

OR: Even you can pass this object so that you can access all the property inside the function as you need:

onclick="clicked(this)"

<html>
  <head>
    <style rel="stylesheet">
      .A { border: 1px solid red; background-color: white }
    </style>
    <script>
      function clicked(c) {
        console.log(c.className);
      }
    </script>
  </head>
  <body>
    <input type="button" class="A" value="1" onclick="clicked(this)">
  </body>
</html>

score 1 · Answer 2 · answered Nov 25 '18 at 06:11

Here is the solution for you. Use DOM element className.

<html>
<head>
 <style rel="stylesheet">
  .A { border: 1px solid red; background-color: white }
 </style>
 <script>
  function clicked(c) {
   console.log(c);
  }
 </script>
</head>
<body>
 <input type="button" class="A" value="1" onclick="clicked(this.className)">
</body>
</html>

score 1 · Answer 3 · answered Nov 25 '18 at 06:18

You can pass this to the function, and then the function will have access to all of the input element properties, among which is className, but you can also access any other attributes within, without changing the calling mechanism

<html>
<head>
 <style rel="stylesheet">
  .A { border: 1px solid red; background-color: white }
 </style>
 <script>
  function clicked(v) {
   console.log(v.className,v.value,v.type);
  }
 </script>
</head>
<body>
 <input type="button" class="A" value="1" onclick="clicked(this)">
</body>
</html>

How can I give a class as a parameter to function?

3 Answers3