Question

I’ve got a table containing the periodic table, and this jQuery to, when you click on an element’s name, tell you what it’s full name is.

However when I click on one nothing happens… I’ve tried different syntax etc but still nothing.

Here’s what my table HTML looks like (class=”s-4″ means font-size:4; – doesn’t mean anything to this question):

<td class="s-4"><a class="e" href="#" data-e="B">B</a></td>
<td class="s-4"><a class="e" href="#" data-e="C">C</a></td>
<td class="s-4"><a class="e" href="#" data-e="N">N</a></td>
<td class="s-4"><a class="e" href="#" data-e="O">O</a></td>
<td class="s-4"><a class="e" href="#" data-e="F">F</a></td>
<td class="s-4"><a class="e" href="#" data-e="Ne">Ne</a></td>

And here’s what my jQuery/JavaScript looks like:

   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(document).ready(function() {
    $(".e").click(function() {
    var e = this.data-e;
      if(e == 'H') { $("#a").html('H is Hydrogen'); }
      if(e == 'He') { $("#a").html('He is Helium'); }
      if(e == 'Li') { $("#a").html('Li is Lithium'); }
      if(e == 'Be') { $("#a").html('Be is Beryllium'); }
      if(e == 'B') { $("#a").html('B is Boron'); }
      if(e == 'C') { $("#a").html('C is Carbon'); }
      if(e == 'N') { $("#a").html('N is Nitrogen'); }
etc etc... and then

    });
    });
    </script>

#a refers to the <h1> at the top of my page, and .e refers to the links (that you click on to find out the element’s name)

Does anyone have any ideas?

Thanks

Answer 1

var e = this.data-e

should be

var e = $(this).data('e');

or

var e = $(this).attr('data-e');

Read about .data()