Activate event handler to display information

My goal is to display periodic table data within a single div using an onClick event, extracting the data from the li attribute itself.

Javascript snippet:

<script>
    function showElement() {

        var number = document.getElementById("myBtn").getAttribute("data-number");
        var symbol = document.getElementById("myBtn").getAttribute("data-symbol");
        var name = document.getElementById("myBtn").getAttribute("data-name");
        var mass = document.getElementById("myBtn").getAttribute("data-mass");

        document.getElementById("element-info").innerHTML = '<span class="atomic-number">' + number + '</span>' + '<h1>' + symbol + '</h1>' + '<p>' + name + '</p>' + '<p>' + mass + '</p>';
    }

</script>

Here's the corresponding HTML code:

enter code here

You can view the layout in the following screenshot: view image description here

Any feedback or suggestions are welcome.

javascriptonclickattributes

Answer №1

Do you find this information helpful? I am the creator of HTML, as it appears to be missing in your original inquiry.

function displayElement() {
        var num = elementBtn.dataset.num;
        var sym = elementBtn.dataset.sym;
        var nm = elementBtn.dataset.nm;
        var ms = elementBtn.dataset.ms;

        document.getElementById("element_details").innerHTML = '<span class="atomic-number">' + num + '</span>' + '<h1>' + sym + '</h1>' + '<p>' + nm + '</p>' + '<p>' + ms + '</p>';
    }


elementBtn.addEventListener("click", displayElement)
<button id="elementBtn" data-num="1" data-sym="symbol" data-nm="name" data-ms="mass">My Element Button</button>

<p id="element_details"></p>

Answer №2

I've discovered the resolution.

Please refer to the following:

<ul>
<li id="option1" 
   data-id="101" 
   data-option="21"
   onclick="goDoSomething(this);">
       Option-1
</li>
<li id="option1" 
   data-id="102" 
   data-option="22" 
   onclick="goDoSomething(this);">
       Option-2
</li>

JavaScript Code:

function goDoSomething(d){
var dataOption = (d.getAttribute("data-option"));
var dataId = (d.getAttribute("data-id"));

document.getElementById("outPut").innerHTML = 
'<p>' + 'Data Option:' + dataOption + '</p>' + 
'<p>' + 'Data Id:' + dataId + '</p>';
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

When attempting to send data from Ajax to PHP as JSON, an error occurs and the data transmission fails

When attempting to send data as JSON, an error response is received stating: SyntaxError: Unexpected token < in JSON at position 0. If the data is sent as text, it successfully reaches PHP, but PHP does not respond accordingly. AJAX/JavaScript using J ...

javascriptphpjqueryjsonajax

Ways to convert all keys to uppercase in an array of objects?

Is there a way to capitalize the first letter of every key in an array of objects? I attempted to achieve this with the code below, but it's not working as expected. Any suggestions or corrections are appreciated. #current code function capitalizeO ...

javascriptarraystypescriptobject

What is the best way to send and utilize a variable from app.js in index.ejs?

Why are my attempts to pass variables from app.js to index.ejs not working? I am using Mongoose and EJS, and I want to display database data on my web-page instead of just using console.log(). How can I do this correctly? (app.js snippet followed by inde ...

javascriptnode.jsmongodbmongoose

Revising Your Task Checklist with React

I encountered an issue while attempting to update the value retrieved from Addlist. Unfortunately, my solution isn't working as expected. Additionally, clicking on the '+' button without entering any text results in an empty list being creat ...

javascriptreactjs

Having trouble with deploying Node.js to Heroku? Feel like your 'git push her

After successfully running my app locally, I encountered an issue when trying to deploy it to Heroku. The deployment process just hangs indefinitely and only displays one public file on the website with an error message stating: "https://analogy-alley.hero ...

javascriptnode.jsherokuwebpackbundle

Different Categories of Array Deconstruction

While iterating through an array, I am utilizing destructuring. const newArr = arr.map(({name, age}) => `${name} ${age}`) An error occurs in the above code stating: Binding element 'name' implicitly has an 'any' type To resolve th ...

javascripttypescript

The deletion of property '1' from the [object Array] is not possible

How to Retrieve a List in My Components Using Input : @Input() usersInput: Section[]; export interface Section { displayName: string; userId: number; title: number; } Here is the Value List : 0: displayName: "بدون نام" ...

javascriptangulartypescript

Why can't we access res.locals.user in the ejs file?

Working with NODE JS In my project, I have a dashboard.ejs file and a .js file. I tried setting a variable in the js file to locals but I am unable to access it in the ejs file. The main functionality of my project is ensuring that the user logs in befo ...

javascriptnode.jsmongodbexpressmongoose

Display or conceal navigation items in AngularJS based on the user's logged-in status

My AngularJS app is a single-page application that works with Express, node.js, and MongoDB using Mongoose. I am also implementing Passport for user management/authentication. I want the navbar items to dynamically change based on whether a user is logged ...

javascriptangularjsnode.jsexpress

Retrieving all rows from a table using Laravel API and Vue.js

<template> <div class="container"> <div class="row mt-5 mb-3"> <div class="col-md-10"> <h3>Gallery</h3> </div> <div class="col-md-2"> <button class="btn btn-success" ...

javascriptlaravelvue.js

Tips for preventing redundant AJAX calls following a setTimeout

I have a text field where I check the database for matches when users type. However, I want to avoid overloading the database with unnecessary queries if someone quickly types several characters. After browsing the internet, it seems like the recommended ...

javascriptjqueryajax

Can the color scheme be customized for both light and dark themes in Ant Design version 5?

After creating a hook that successfully toggles between light and dark modes in Chrome's Rendering panel, I noticed that the values in the ConfigProvider remain unchanged when switching themes. Can anyone suggest a workaround to modify the design toke ...

javascriptreactjsnext.jsthemesantd

Patience is key when waiting for both subscriptions to be completed before proceeding with an

I am facing a challenge with two subscriptions as shown below: this.birthdays = await this.birthdaySP.getBirthdays(); this.birthdays.subscribe(groups => { const allBirthdayT = []; groups.map(c => { allBirthdayT.push({ key: c.pa ...

javascriptangularfirebasefirebase-realtime-databaseangularfire2

Adjusting elements within nested JavaScript arrays

When using the code below, an empty array containing 7 empty arrays is expected to be created, essentially forming a 7x7 grid. While accessing elements within nested arrays seems to work correctly, attempting to modify their values causes all elements in ...

javascriptarraysmultidimensional-array

Building a local database using the MVC framework concept

Can a locally stored database be developed using MVC framework principles in javascript and html5? Thank you Ravindran ...

javascriptdatabasehtmljavascriptmvc

What is the process for releasing an NPM package to the NPM registry rather than the GitHub registry?

I have developed an NPM package available at - (https://github.com/fyndreact/nitrozen) The package was successfully published on the Github registry (), but I am looking to publish it on the NPM registry. However, I cannot locate the package in the NPM r ...

javascriptnpmnpm-publishgithub-package-registrynpm-registry

Show the content retrieved from the JSON post request

In the javascript code below, I am trying to delete a page using $.post() and then display a message with showStatus(). Instead of hardcoding the message in showStatus(), I want to pass the text returned by the $.post() call. How can I achieve this? $.p ...

asp.netjavascriptjqueryjson

Having difficulty formatting text alignment using CSS

Is there a way to maintain the alignment of text in the output of the 'About' section even when the content changes dynamically? I want the new line to appear just below 'Lorem', but currently, it shifts below the colon(:). Since the le ...

javascripthtmlcss

The sequence of data and the final event triggered by http.createServer

const server = http.createServer(async (request, response) => { if (request.method === "POST") { var data = ""; request .on("data", async (chunk) => { console.log("1"); data + ...

javascriptnode.js

Troubleshooting issue for Symfony4: Bootstrap 4 JavaScript functionality not functioning

Having some trouble implementing Bootstrap 4 with Symfony 4 using yarn package manager. The JavaScript isn't functioning properly - no errors in the console, but when trying to open the navbar by clicking the collapsed button, nothing happens. Here i ...

javascriptphpbootstrap-4symfony4