Onclick Events On Li Items, To Change Textfields

I am trying to implement an onClick event on li items. Every time this is event is triggered, it will change some text in a div to some preset text I have in javascript. However I

Solution 1:

Your fiddle does not include jQuery, so that is why it's not working. However, you have several issues which can be addressed.

Firstly, you only need to use one document.ready handler. All your code can be placed in there. Secondly, if you follow DRY principles then you can use a single event handler for all elements if you separate out the individual information for each one in to data attributes, like this:

<ul><li><ahref="history.php">Back</a></li><li><ahref="#"class="link"id="link"data-title="Anthony"data-alias="Alias: Lysander Lucretius II"data-bio="A human cleric who worships Verum-Die, speaks many languages and talks much better than he hits. Has been seen with a black gem and a white gem lodged in his chest.">Anthony</a></li><li><ahref="#"class="link"id="link2"data-title="Ben"data-alias="Alias: Nishi Kani-Orc Garland-Human"data-bio="Not much is known about the rogueish character, it is known though that he is sneaky and acrobatic. He has been seen feeding a cat, and has said he will not use his shape-shifitng abilities to commit crimes.">Ben</a></li><li><ahref="#"class="link"id="link3"data-title="Jacob"data-alias="Alias: Max"data-bio="The large half-giant is crippled and bound to a magic chair, however this giant has mastery over some sort of telekenetic arts.">Jacob</a></li><li><ahref="#"class="link"id="link4"data-title="Jesse"data-alias="Alias:Kuso Oma"data-bio="The age isnt the only mystery sourrounding this women, seemingly being able to summun demon-like abilities at will and laughing in the face of danger. Has stated her race comes from deep underground.">Jesse</a></li><li><ahref="#"class="link"id="link5"data-title="Karmar"data-alias="Alias:Zota"data-bio="A human cleric who worships Verum-Die, speaks many languages and talks much better than he hits. Has been seen with a black gem and a white gem lodged in his chest.">Karmar</a></li><li><ahref="#"class="link"id="link6"data-title="Alias:Drudder"data-alias="Alias: Lysander Lucretius II"data-bio="This drow definitely practices some dark arts, but has already risked his life to save one of the groups memebers. Was caught in some shady dealings with rat-folk.">Mitchell</a></li></ul><br><br><br><br><h2id="name">Anthony</h2><divid="alias">Alias: Lysander Lucretius II</div><br><divid="bio">A human cleric who worships Verum-Die, speaks many languages and talks much better than he hits. Has been seen with a black gem and a white gem lodged in his chest.</div><br>

$(document).ready(function() {
    $('.link').on('click', function() {
        var $el = $(this);
        $('#name').text($el.data('name'));
        $("#alias").text($el.data('alias'));
        $("#bio").text($el.data('bio'));
    });
});

Working example

Solution 2:

$('li').click(function(){
   $('h2').text($(this).find('a').text());
});

https://jsfiddle.net/jzzdLvm5/9/

You select by the a tag where you click and put the text inside the current h2 text (more logical than div now)

Solution 3:

You can use "this" object to get the label name & change it for h2 as told by Thomas and for the rest of text use switch case or else if ladder to check for conditions instead of these many JS functions & use the jquery method $(#id).text() to set texts for the field in that switch case, it'll be easy.

$(document).ready(function(){
    $('a').click(function(){
  var id = $(this).attr("id");
  $('h2').text($(this).text());
    if(id == "link"){
        $('h2').text($(this).text());
      $('#anthony').text("sample text for link.");
        $('#anthony2').text("detailed text.");
    }elseif(id == "link2"){
        $('h2').text($(this).text());
      $('#anthony').text("sample text for link2.");
        $('#anthony2').text("detailed text.");
    }...so on
  })
});

Solution 4:

Write your javascript code in one document.ready() event,and make sure you are referencing existing HTML tags/elements in your script, for example .

$document.ready(function(){

  $('a').click(function(){
     document.getElementsByTagName('h2')[0].innerHTML = "Anthony";
 });  
});

-The on click should be tired to the child element of the list item you are clicking, in this case it is the anchor 'a' element -The 'h2' must exist in your HTML