CODEWITHSUNDEEP
javascripthtml
Hoseong Jeon
Hoseong Jeon

Reputation: 1350

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

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?

Upvotes: 3

Views: 973

Answers (3)

Mamun
Mamun

Reputation: 68933

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>

Upvotes: 2

Ahmad
Ahmad

Reputation: 12737

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>

Upvotes: 1

onejeet
onejeet

Reputation: 1191

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>

Upvotes: 1

Related Questions