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>
