Anthony Drury Anthony Drury - 3 years ago 106
HTML Question

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 cannot get it working. I have tried asking this on reddit as well.

The code displayed bellow can be also found in a JSFiddle

<body>

<div id="header">
<h1>THE BODAK</h1>
</div>


<ul>
<li><a href="history.php">Back</a></li>
<li><a href="#" class="link" id="link" >Anthony</a></li>
<li><a href="#" class="link2" id="link2" >Ben</a></li>
<li><a href="#" class="link3" id="link3" >Jacob</a></li>
<li><a href="#" class="link4" id="link4" >Jesse</a></li>
<li><a href="#" class="link5" id="link5" >Karmar</a></li>
<li><a href="#" class="link6" id="link6" >Mitchell</a></li>
</ul>
<br>
<br>
<br>
<br>
<script>

$(document).ready(function() {
$('.link').on('click', function() {
document.getElementsByTagName('h2')[0].innerHTML = "Anthony";
document.getElementById("anthony").innerHTML = "Alias: Lysander Lucretius II";
document.getElementById("anthony2").innerHTML = "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.";
});

});

$(document).ready(function() {
$(".link2").click(function(){
document.getElementsByTagName('h2')[0].innerHTML = "Ben";
document.getElementById("anthony").innerHTML = "Alias: Nishi Kani-Orc Garland-Human";
document.getElementById("anthony2").innerHTML = "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.";
});

});

$(document).ready(function() {
$(".link3").click(function(){
document.getElementsByTagName('h2')[0].innerHTML = "Jacob";
document.getElementsByTagName('h2')[0].innerHTML = "Alias: Max";
document.getElementById("anthony2").innerHTML = "The large half-giant is crippled and bound to a magic chair, however this giant has mastery over some sort of telekenetic arts.";
});

});

$(document).ready(function() {
$(".link4").click(function(){
document.getElementsByTagName('h2')[0].innerHTML = "Jesse";
document.getElementById("anthony").innerHTML = "Alias:Kuso Oma";
document.getElementById("anthony2").innerHTML = "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.";
});

});

$(document).ready(function() {
$(".link5").click(function(){
document.getElementsByTagName('h2')[0].innerHTML = "Karmar";
document.getElementById("anthony").innerHTML = "Alias:Zota";
document.getElementById("anthony2").innerHTML = "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.";
});

});

$(document).ready(function() {
$(".link6").click(function(){
document.getElementsByTagName('h2')[0].innerHTML = "Alias:Drudder";
document.getElementById("anthony").innerHTML = "Alias: Lysander Lucretius II";
document.getElementById("anthony2").innerHTML = "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.";
});

});


</script>

<h2>Anthony</h2>
<div id="anthony" style="word-wrap: break-word; width: 100%" >Alias: Lysander Lucretius II</div></TD>
<br>
<div id="anthony2" style="word-wrap: break-word; width: 100%" >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></TD>
<br>

</body>

Answer Source

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><a href="history.php">Back</a></li>
    <li><a href="#" 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><a href="#" 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><a href="#" 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><a href="#" 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><a href="#" 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><a href="#" 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>

<h2 id="name">Anthony</h2>
<div id="alias">Alias: Lysander Lucretius II</div><br>
<div id="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

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download