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?
3 answers
solution1
2 ACCPTED 2018-11-25 06:09:41
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 benullor""(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
classNamegets and sets the value of theclassattribute 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>
solution2
1 2018-11-25 06:11:37
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>
solution3
1 2018-11-25 06:18:44
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.