I'm trying to use a VARIABLE as a ATTRIBUTE value...

I have :

var text = "Hello!";

and the HTML is :

<li class="pro" id="text"> ---> (I want the attribute ID to equals the TEXT variable)

How can I make this work?

Thank you

---

EDIT

I will be more specific in my question.

Here's what I really have :

<li class="product" name="RD-101" price="18"  minimum="4" gap="4"> 
                         <a class="product-image fancybox" href="images/product_big.jpg" title="Picture 4">
                             <img src="images/product_2.png" alt="Preview"/>
                             <div class="text-overlay">
                              <p class="product-heading">Description</p>
                               Enseignes résidentielles imprimées sur 2 panneaux 4 mm 36” x 24” collés dos à dos.
                             </div>
                         </a>
                         <p class="product-heading">RD-101 (Simple)</p>
                         <a href="#" id="test" class="product-buy">Ajouter au panier</a>
                         <p class="product-meta">Double de pareterre 32x24</p>
                         <div class="product-price">18<span class="product-currency">$</span></div>

                    </li>

As you can see I use custom attributes that are set in my Javascript code. I want to know how to set (for instance)...the PRICE attribute to a VARIABLE VALUE instead of the number "18" like it is right now in what I pasted up there.

I was thinking of something like -->

<li class="product" name="RD-101" price="MY_VARIABLE_HERE"  minimum="4" gap="4"> 

I'm trying to use a VARIABLE as a ATTRIBUTE value...

I have :

var text = "Hello!";

and the HTML is :

<li class="pro" id="text"> ---> (I want the attribute ID to equals the TEXT variable)

How can I make this work?

Thank you

---

EDIT

I will be more specific in my question.

Here's what I really have :

<li class="product" name="RD-101" price="18"  minimum="4" gap="4"> 
                         <a class="product-image fancybox" href="images/product_big.jpg" title="Picture 4">
                             <img src="images/product_2.png" alt="Preview"/>
                             <div class="text-overlay">
                              <p class="product-heading">Description</p>
                               Enseignes résidentielles imprimées sur 2 panneaux 4 mm 36” x 24” collés dos à dos.
                             </div>
                         </a>
                         <p class="product-heading">RD-101 (Simple)</p>
                         <a href="#" id="test" class="product-buy">Ajouter au panier</a>
                         <p class="product-meta">Double de pareterre 32x24</p>
                         <div class="product-price">18<span class="product-currency">$</span></div>

                    </li>

As you can see I use custom attributes that are set in my Javascript code. I want to know how to set (for instance)...the PRICE attribute to a VARIABLE VALUE instead of the number "18" like it is right now in what I pasted up there.

I was thinking of something like -->

<li class="product" name="RD-101" price="MY_VARIABLE_HERE"  minimum="4" gap="4"> 

• javascript
• html

Share Improve this question Follow edited May 30, 2012 at 17:56 larin555 asked May 30, 2012 at 17:02 larin555larin555 1,69944 gold badges2828 silver badges4343 bronze badges 3

• 2 li elements do not have a name attribute. use data-name if you want to store custom data. – ThiefMaster Commented May 30, 2012 at 17:03
• Ok. But let's say the attribute is "id"...How can I make it equals the TEXT variable value? That's what I need to know – larin555 Commented May 30, 2012 at 17:07
• @user1388136 Since your update, I'm now confused. Are you saying you want the ID of this particular <LI> object to be the same as the content of the "text" variable? So in your example, the desired oute is <li class="pro" id="Hello!">? It seems a bit of a strange request – freefaller Commented May 30, 2012 at 17:13

Add a ment  | 

6 Answers 6

Sorted by: Reset to default 2

Use $("li.pro").attr('id', text); with jQuery

Remember attribute name is not valid for a <li>

EDIT :

With no jQuery, this code add a price (not valid) attribute to all li elements

<ul id="my_ul_id">
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>

-

var text = 'Hello';
var arr_li = document.getElementById("my_ul_id").getElementsByTagName("li"); 
for(var i=0 ; i<arr_li.length ; i++)
{
  arr_li[i].setAttribute('price', text);
}

Last thing, we said price wasn't a valid attribute. If you want your HTML doc to be valid, have a look here

You could use the JQuery attr method:

var theName = 'yourMom';
$('li.pro').attr('name', theName);​

http://jsfiddle/J798a/2/

As you've specified "javascript" rather than "jquery", you could do something along the following...

<script type="text/javascript">
var text = "Hello!";
document.getElementById("liItem").setAttribute("id",text);
</script>

<ul>
  <li class="pro" id="liItem">
</ul>

Updated to reflect change of attribute from "name" to "id"

$("li.pro").attr('name', text);

you can use any name for attribute, you like

Javascript would set it with

<script type="text/javascript">
    var text = "Hello!";
    document.getElementById("changeMe").setAttribute("id",text);
</script>

<ul>
   <li id="changeMe">
</ul>

setAttribute sets the provided attribute (first argument) to the value of the second arguement... so element.setAttribute("name", "john smith") would set the name to "john smith" and element.setAttribute("class", "math") would set the class attribute to "math".

You can also do it with javascript templating libraries.

Some examples:

• Handlebars
• JavascriptMVC/CanJS
• a ton of others

With JavascriptMVC, for example, an ejs file containing the following line (where text is actually a JS variable) will be transformed to html:

<li class="pro" id="<%= text %>">

You may read on this here: http://javascriptmvc./docs.html#!jQuery.View

Wele to the Fantastic Infinite Javascript Framework/libraries world :)!!