CODEWITHSUNDEEP
javascripthtml
larin555
larin555

Reputation: 1689

Attribute and Variable (Simple)

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

Upvotes: 0

Views: 1966

Answers (6)

zessx
zessx

Reputation: 68790

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

Upvotes: 2

unludo
unludo

Reputation: 5010

You can also do it with javascript templating libraries.

Some examples:

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.com/docs.html#!jQuery.View

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

Upvotes: 1

freefaller
freefaller

Reputation: 19953

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"

Upvotes: 2

pandavenger
pandavenger

Reputation: 1027

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".

Upvotes: 1

Josh Noe
Josh Noe

Reputation: 2798

You could use the JQuery attr method:

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

http://jsfiddle.net/J798a/2/

Upvotes: 2

Rab
Rab

Reputation: 35572

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

you can use any name for attribute, you like

Upvotes: 1

Related Questions