Why i can't access one of the html element's attribute value, but i can access other ones using jQuery?

Question

1) Why can i only access the id attribute's value but the rest logs undefined using this code?

2) How can i access them in a different way?

 $('.block').click(function() { console.log(this.id); // is defined console.log(this.class); // undefined console.log(this.value) // undefined }); 

 <script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script> <div class="container"> <div class="game-wrap"> <div class="row"> <div class="block" id="block1" value="1"> </div> <div class="block" id="block2" value="2"> </div> <div class="block" id="block3" value="3"> </div> </div> </div> </div> 

Answer 1

Use className property to access class attribute of the specified element.

console.log(this.className);

And div element doesn't have value property instead use .textContent / .innerHTML property

console.log(this.textContent); //this.innerHTML

And to store arbitrary data use data-* prefixed attribute which can be accessed using Element.dataset property

<div class="block" id="block2" data-value="2"> 2</div>

 $('.block').click(function() { console.log(this.id); // is defined console.log(this.className); // undefined console.log(this.dataset.value) // undefined //JQuery console.log($(this).prop("id")); console.log($(this).attr("class")); console.log($(this).data("value")); }); 

 <script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script> <div class="block" id="block1" data-value="1">1 </div> <div class="block" id="block2" data-value="2"> 2</div> <div class="block" id="block3" data-value="3"> 3</div> 

Answer 2

this.class

class is a reserved keyword in Javascript and older versions of IE couldn't properly interpret it when used as an object property. Because of this, the Element property that corresponds to an HTML tag's class attribute is className .
In other words, it should be this.className

FYI, it's the same thing with the for attribute on <label> tags, the corresponding property is htmlFor

this.value

The value property is only applicable to form elements. The value attribute is non-standard for other tags but you can still access the attribute value by calling this.getAttribute('value') . However, custom attributes like this should be prefixed with data- , so it should be

<div class="block" id="block1" data-value="1"> </div>

and

this.getAttribute('data-value') or $(this).attr('data-value')

Answer 3

try this

To get class

console.log($(this).attr("class"));

To get value

console.log($(this).attr("value"));

Answer 4

You have to use the right jQuery function to access the attributes.

 $('.block').click(function(){
    console.log( $(this).attr('id') ); 
    console.log( $(this).attr('class') ); 
    console.log( $(this).attr('value') ); 
 });

Answer 5

Check this

  $('.block').click(function(){ console.log(this.id); // is defined console.log(this.className); // undefined console.log($(this).attr('value')) // undefined }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <div class="container"> <div class="game-wrap"> <div class="row"> <div class="block" id="block1" value="1">test 1 </div> <div class="block" id="block2" value="2"> 2</div> <div class="block" id="block3" value="3"> 3</div> </div> </div> </div> 

Answer 6

Because value is not a valid attribute for a div element, and class attribute is referenced in Javascript by className . Instead of value you should look at html5 data-* attribute, which allows you to embed any arbitrary data you want.

For example:

<div class="container">
  <div class="game-wrap">
    <div class="row">
      <div class="block" id="block1" data-value="1" data-best-dinosaur="T-Rex"> </div>
      <div class="block" id="block2" data-value="2" data-best-dinosaur="Stegosaurus"> </div>
      <div class="block" id="block3" data-value="3" data-best-dinosaur="Diplodocus"> </div>
    </div>
  </div>
</div>

<script>
  $('.block').click(function() {
    console.log(this.id);
    console.log(this.className);
    console.log(this.dataset.value)
    console.log(this.dataset.bestDinosaur);
  });
</script>