JS: Concatenating $(this).val() to get an id name

Question

I'm trying to hover over an h1 and trigger a glowing effect on a span whose id is stored in the value of the h1. I have a working example set up of how the glowing will work with a sentence, but I can't get it to work with the h1. I want to be able to hover over one of the h1s and cause the square of the same colour to glow. Can someone tell me where I'm going wrong?

 $(document).ready(function() { $("#verb").mouseenter(function() { $(".verb").addClass("hovered"); }); $("#verb").mouseleave(function() { $(".verb").removeClass("hovered"); }); $("#noun").mouseenter(function() { $(".noun").addClass("hovered"); }); $("#noun").mouseleave(function() { $(".noun").removeClass("hovered"); }); $("h1").mouseenter(function() { $("#".concat($(this).val())).addClass("hovered"); }); }); 

 ._21 { color: red !important } ._106 { color: orange !important } /*glowing effect*/ #verb { color: blue } #noun { color: blue } .hovered { transition: text-shadow 0.1s linear; text-shadow: 0 0 3px blue; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <p> <span id="verb">Verbs</span> &nbsp; - &nbsp; <span id="noun">Nouns</span> </p> I <span class="verb">like</span> to <span class="verb">ride</span> my <span class="noun">bicycle</span> every <span class="noun">day</span> . <br><br> <h1 class="_21" value="red"> Red </h1> <h1 class="_106" value="orange"> Orange </h1> <p style="font-size: 28px"> <span class="_21" id="red">■</span> <span class="_106" id="orange">■</span> </p> 

Answer 1

It's typical to use + to concatenate strings in JavaScript instead of the .concat() method, although .concat() will work too. + is a little simpler and will be more familiar to people who read your code. In fact I had totally forgotten that strings had a .concat() method when I first looked at your code!

As noted on the MDN page for .concat() , + and += also perform better, although that wouldn't matter in a simple case like this.

As Patrick and Mikey noted, h1 elements don't have a value , but you can use data-value instead.

And for a simple task like toggling a class on or off, you can use the single-argument version of jQuery's .hover() , where you give one function that gets called both on mouseenter and mouseleave .

Put those together and it might look like this:

 $(document).ready(function() { $("#verb").hover( function() { $(".verb").toggleClass("hovered"); }); $("#noun").hover( function() { $(".noun").toggleClass("hovered"); }); $("h1").hover( function() { $( "#" + $(this).data('value') ).toggleClass("hovered"); }); }); 

 ._21 { color: red !important } ._106 { color: orange !important } /*glowing effect*/ #verb { color: blue } #noun { color: blue } .hovered { transition: text-shadow 0.1s linear; text-shadow: 0 0 3px blue; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <p> <span id="verb">Verbs</span> &nbsp; - &nbsp; <span id="noun">Nouns</span> </p> I <span class="verb">like</span> to <span class="verb">ride</span> my <span class="noun">bicycle</span> every <span class="noun">day</span> . <br><br> <h1 class="_21" data-value="red"> Red </h1> <h1 class="_106" data-value="orange"> Orange </h1> <p style="font-size: 28px"> <span class="_21" id="red">■</span> <span class="_106" id="orange">■</span> </p>