Triggering onClick events on list items to update text fields

Question

Triggering onClick events on list items to update text fields

I have been attempting to create an onClick event for li items. The goal is to change some specified text in a div to preset text using JavaScript whenever this event is activated. However, I have been unsuccessful so far. I even tried reaching out for help on reddit.

You can also find the following code snippet 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.";
    });

});

// Similar functions for other links omitted for brevity

</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>

javascript jquery html css webserver

Answer 1

Answer №1

Your code snippet does not include jQuery, which explains why it's not functioning properly. However, there are some improvements that can be made.

Primarily, you should only utilize one document.ready handler for all your code. Additionally, adhering to the DRY (Don't Repeat Yourself) principle, you can use a single event handler for multiple elements by storing individual information in separate 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-shifting 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 telekinetic arts.">Jacob</a></li>
    <li><a href="#" class="link" id="link4" data-title="Jesse" data-alias="Alias:Kuso Oma" data-bio="The age isn't the only mystery surrounding this woman, seemingly able to summon 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 group members. 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'));
    });
});

View working example

Answer 2

Your code snippet does not include jQuery, which explains why it's not functioning properly. However, there are some improvements that can be made.

Primarily, you should only utilize one document.ready handler for all your code. Additionally, adhering to the DRY (Don't Repeat Yourself) principle, you can use a single event handler for multiple elements by storing individual information in separate 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-shifting 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 telekinetic arts.">Jacob</a></li>
    <li><a href="#" class="link" id="link4" data-title="Jesse" data-alias="Alias:Kuso Oma" data-bio="The age isn't the only mystery surrounding this woman, seemingly able to summon 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 group members. 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'));
    });
});

View working example

Answer 3

Answer №2

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

https://example.com/jsfiddle123

Whenever a li element is clicked, the text of the corresponding a tag will replace the text in the current h2 element (which makes more sense than using a div).

Answer 4

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

https://example.com/jsfiddle123

Whenever a li element is clicked, the text of the corresponding a tag will replace the text in the current h2 element (which makes more sense than using a div).

Answer 5

Answer №3

To retrieve and modify the label name for h2 as recommended by Thomas, utilize the "this" object. For handling multiple conditions instead of numerous JavaScript functions, employ a switch case or else if ladder. To assign text values within the switch case, consider using the jquery method $(#id).text(). This approach will streamline the process.

$(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.");
    }else if(id == "link2"){
        $('h2').text($(this).text());
      $('#anthony').text("sample text for link2.");
        $('#anthony2').text("detailed text.");
    }...and so forth
  })
});

Answer 6

To retrieve and modify the label name for h2 as recommended by Thomas, utilize the "this" object. For handling multiple conditions instead of numerous JavaScript functions, employ a switch case or else if ladder. To assign text values within the switch case, consider using the jquery method $(#id).text(). This approach will streamline the process.

$(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.");
    }else if(id == "link2"){
        $('h2').text($(this).text());
      $('#anthony').text("sample text for link2.");
        $('#anthony2').text("detailed text.");
    }...and so forth
  })
});

Answer 7

Answer №4

In your JavaScript code, ensure that you write it within a single document.ready() event. Be sure to reference existing HTML tags or elements in your script.

$document.ready(function(){

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

-The click event should be linked to the child element of the list item being clicked, such as the anchor 'a' element. -The 'h2' tag must already exist in your HTML structure.

Answer 8

In your JavaScript code, ensure that you write it within a single document.ready() event. Be sure to reference existing HTML tags or elements in your script.

$document.ready(function(){

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

-The click event should be linked to the child element of the list item being clicked, such as the anchor 'a' element. -The 'h2' tag must already exist in your HTML structure.

Triggering onClick events on list items to update text fields

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

What is the best way to properly pass parameters?

Encountering issues with an Express Server when sending multiple AngularJS Post requests. Server crashes when attempting a second post request

Tips for implementing an asynchronous function that needs to finish before proceeding in a React class component

Leveraging Angular js for performing operations in Putty

The function Mediarecorder.start() is experiencing issues on Firefox for Android and is not functioning

Generatively generating a new element for the react application to be mounted on

What causes the inaccessibility of methods added via decoration?

Is it possible to use the .focus() event on an entire form in JQuery? If so, how

Is there a way to make Bootstrap's dark table heads hoverable without having to manually set the style?

Can you share the updated class name for indicating errors in input groups in Bootstrap 4?

Navigating through events with jQuery

Validating forms using ajax, php, and mysql for seamless user input processing

The JavaScript script that is supposed to change backgrounds is malfunctioning

Checking the alignment of celestial bodies for an array of entities

Facing a dilemma: Javascript not updating HTML image source

What could be causing the href to malfunction within nav tabs in Bootstrap version 4?

Confirm the validity of a data point within the JSON data package

Is there a way to create dynamic documents in Firestore using Angular?

Mongoose .lean() Method Causes Equality Test to Fail

The Bootstrap mixin for customizing button variants could not be located