Definition List get id
Definition List
<dl>
<dt>SKU</dt>
<dd id="product_sku"></dd>
</dl>
How can I get the value of id for id="product_sku" during runtime ? I'd like to get the value and then execute other code depending on the value. It seems like it should be easy to do, but have not been able to get the value.
<dl>
<dt>SKU</dt>
<dd id="product_sku"></dd>
</dl>
How can I get the value of id for id="product_sku" during runtime ? I'd like to get the value and then execute other code depending on the value. It seems like it should be easy to do, but have not been able to get the value.
Last Comment
How do you plan to get data in there to start with? It would have to come from your server side code so you would already know that. Or do you have another function that ins injecting data there?
You are expecting a form field that can accept data?
You are expecting a form field that can accept data?
ASKER
The <script> can't be nested inside the <dl> segment. When I put the <script> immediately below the <dl> segment, the product_sku is blank. So the alert just gives "Product SKU = ". That is what makes this a difficult problem. Anyway, it was a good try David H.H. Lee Thanks for your help, maybe you can think of another solution.
You have a blank because there is no data the dd. Test the link out and you will get an alert with 12344
https://jsbin.com/cotiduxavi/edit?html,output
https://jsbin.com/cotiduxavi/edit?html,output
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>test</title>
</head>
<body>
<dl>
<dt>SKU</dt>
<dd id="product_sku">12344</dd>
</dl>
<script>
product_sku=document.getElementById("product_sku").innerHTML;
alert('Product SKU='+product_sku);
</script>
</body>
</html>
ASKER
Hi Scott Fell, thanks for the info you provided. Yes, I assume the data comes from the server side. I don't know of another function that is injecting data there. It seems like the <dl> segment pulls in the data on its own. I didn't write the original code, so I'm not entirely familiar with it yet.
In your 2nd post, you used <dd id="product_sku">12344</dd>. I'm able to run that correctly, with the alert no longer being blank and gives 12344. However, what I really want to get is the value of "product_sku". Is it possible to get it somehow?
In your 2nd post, you used <dd id="product_sku">12344</dd>. I'm able to run that correctly, with the alert no longer being blank and gives 12344. However, what I really want to get is the value of "product_sku". Is it possible to get it somehow?
ASKER CERTIFIED SOLUTION
THIS SOLUTION IS ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
If the other answers are not what you are looking for, then it seems to me you want what id="?????" contains, because that is the poduct_sku at run time?
If you could post a rendered example from your web page including some stastic container, then we can help better.
For example
can get the IDs like this:
If only ONE dd has an ID, you can read it like this
If you could post a rendered example from your web page including some stastic container, then we can help better.
For example
<div id="container">
<dl>
<dt>SKU</dt>
<dd id="12345"></dd>
</dl>
</div>
can get the IDs like this:
const skuList = [...document.querySelectorAll("#container dd[id]")].map(dd => dd.id);
If only ONE dd has an ID, you can read it like this
const sku = document.querySelector("#container dd[id]").id;
ASKER
Thanks for all of the contributions! They all helped in some way. But the solution from Scott Fell did the trick, was his #3:
3) From an ajax request or other javascript code that injects data
JavaScript
JavaScript is a dynamic, object-based language commonly used for client-side scripting in web browsers. Recently, server side JavaScript frameworks have also emerged. JavaScript runs on nearly every operating system and in almost every mainstream web browser.
127K
Questions
--
Followers
--
Top Experts
Get a personalized solution from industry experts
TRUSTED BY
Eg
</script>
Share some of your working snippet code for better understanding if you need any further assistance.