Why on click on element returns undefined in jquery?

Question

I am trying to get the values of the span that are got clicked but I am either keep getting the undefined or "" blank string. I get blank string on $(this).text(); and $(this).val(); undefined.

Here is the codepen - https://codepen.io/xblack/pen/ypXPee

<div class="legends">
  <div id="alpha" class="legend-cards">
    <span class="legend-symbole">α</span>
    <span class="legend-title-low title">LOW</span>
    <span class="legend-value-low value">3657890</span>
    <span class="legend-title-high title">HIGH</span>
    <span class="legend-value-high value">3657890</span>
  </div>
  <div id="beta" class="legend-cards">
    <span class="legend-symbole">β</span>
    <span class="legend-title-low title">LOW</span>
    <span class="legend-value-low value">3657890</span>
    <span class="legend-title-high title">HIGH</span>
    <span class="legend-value-high value">3657890</span>
  </div>
  <div id="gamma" class="legend-cards">
    <span class="legend-symbole">γ</span>
    <span class="legend-title-low title">LOW</span>
    <span class="legend-value-low value">3657890</span>
    <span class="legend-title-high title">HIGH</span>
    <span class="legend-value-high value">3657890</span>
  </div>
  <div id="other" class="legend-cards">
    <span class="legend-symbole">δ/θ</span>
    <span class="legend-title-low title">DELTA</span>
    <span class="legend-value-low value">3657890</span>
    <span class="legend-title-high title">THETA</span>
    <span class="legend-value-high value">3657890</span>
  </div>
  <div id="eegSense" class="legend-cards">
    <span class="legend-symbole"><img src="img/pain.svg" style="width:50%" alt=""></span>
    <span class="legend-title-low title">ATTENTION</span>
    <span class="legend-value-low value">3657890</span>
    <span class="legend-title-high title">MEDITATION</span>
    <span class="legend-value-high value">3657890</span>
  </div>
</div>

Javascript

$('.value').each((i,el)=>{ 
  console.log(i,$(el).text(), $(el).closest('div').attr('id')); //this works  
});    

$('.title').on('click',()=>{  
  console.log($(this).val()); // this doesn't work
});

$('.value').on('click',()=>{  
  console.log($(this).text()); // this doesn't work
});

when you are using arrow functions, this belongs to the enclosing scope — gurvinder372, Mar 13 '18 at 12:08

score 0 · Accepted Answer · answered Mar 13 '18 at 12:11

Try this demo, you should use html() for span, div, p like tags.

// $('.legend-cards').on('click', () => {
//     let target = $(this).attr('id');
//     console.log(target,this.id);
// });

$('.value').each((i,el)=>{ 
  console.log(i,$(el).html(), $(el).closest('div').attr('id'));   
});    
  
$('.title').on('click',function(){  
  console.log($(this).html()); 
});

$('.value').on('click',function(){  
  console.log($(this).html()); 
});

.legends {
  width: 100%;
  height: 100%;
  font-family:sans-serif;
}

.legends .legend-cards {
  display: grid;
  grid-template-columns: 50px 1fr 1fr;
  grid-template-rows: 10% 1fr;
  grid-gap: 5px;
  color: white;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  padding: 10px;
  background: rgba(0, 0, 0, 0.5);
  cursor: pointer;
}

.title:hover, .value:hover{
  background:black;
}

.legend-cards .legend-symbole {
  grid-column: 1/2;
  grid-row: 1/3;
  align-self: center;
  justify-self: center;
  font-size: 24px;
}

.title {
  align-self: center;
  font-size: 10px;
  font-weight: 600;
}

.value {
  align-self: center;
  font-size: 16px;
  font-weight: 300;
  opacity: 0.7;
}

.legend-cards .legend-title-low {
  grid-column: 2/3;
  grid-row: 1/2;
}

.legend-cards .legend-value-low {
  grid-column: 2/3;
  grid-row: 2/3;
}

.legend-cards .legend-title-high {
  grid-column: 3/4;
  grid-row: 1/2;
}

.legend-cards .legend-value-high {
  grid-column: 3/4;
  grid-row: 2/3;
}

.value:hover .legend-cards {
  background: black;
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="legends">
  <div id="alpha" class="legend-cards">
    <span class="legend-symbole">α</span>
    <span class="legend-title-low title">LOW</span>
    <span class="legend-value-low value">3657890</span>
    <span class="legend-title-high title">HIGH</span>
    <span class="legend-value-high value">3657890</span>
  </div>
  <div id="beta" class="legend-cards">
    <span class="legend-symbole">β</span>
    <span class="legend-title-low title">LOW</span>
    <span class="legend-value-low value">3657890</span>
    <span class="legend-title-high title">HIGH</span>
    <span class="legend-value-high value">3657890</span>
  </div>
  <div id="gamma" class="legend-cards">
    <span class="legend-symbole">γ</span>
    <span class="legend-title-low title">LOW</span>
    <span class="legend-value-low value">3657890</span>
    <span class="legend-title-high title">HIGH</span>
    <span class="legend-value-high value">3657890</span>
  </div>
  <div id="other" class="legend-cards">
    <span class="legend-symbole">δ/θ</span>
    <span class="legend-title-low title">DELTA</span>
    <span class="legend-value-low value">3657890</span>
    <span class="legend-title-high title">THETA</span>
    <span class="legend-value-high value">3657890</span>
  </div>
  <div id="eegSense" class="legend-cards">
    <span class="legend-symbole"><img src="img/pain.svg" style="width:50%" alt=""></span>
    <span class="legend-title-low title">ATTENTION</span>
    <span class="legend-value-low value">3657890</span>
    <span class="legend-title-high title">MEDITATION</span>
    <span class="legend-value-high value">3657890</span>
  </div>
</div>

Thank you so much and this is really stupid. It doesn't support arrow function. — Greyfrog, Mar 13 '18 at 12:51

Why on click on element returns undefined in jquery?

1 Answers1