How do i set value attribute to a div tag?

Question

I have 3 boxes, when i click on each box i want to alert the attribute value of each box.

https://jsfiddle.net/aedzgu9v/

<div class="box" value="box1"></div>
<div class="box" value="box2"></div>
<div class="box" value="box3"></div>

.box{
  height: 80px;
  width: 80px;
  border: 2px solid blue;
  margin: 5px;
}

$('.box').on('click', function(){
    var value = $(this).val();
  alert(value);
});

Answer 1

Only form controls have a legitimate property value that allows you to use val()... other elements do not

I suggest you switch to using a data- attribute and access it using either data() or attr()

<div class="box" data-value="box1"></div>

JS

$('.box').on('click', function(){
    var value = $(this).data('value');
    alert(value);
});

Answer 2

Try this instead:

<div class="box" name="box1"></div>
<div class="box" name="box2"></div>
<div class="box" name="box3"></div>

$('.box').on('click', function(){
    var value = $(this).attr('name');
  alert(value);
});

Or if you want to use value attribute:

$('.box').on('click', function(){
    var value = $(this).attr('value');
  alert(value);
});