Attribute and Variable (Simple)

Question

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

`li` elements do not have a `name` attribute. use `data-name` if you want to store custom data. — ThiefMaster, May 30 '12 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, May 30 '12 at 17:07
@user1388136 Since your update, I'm now confused. Are you saying you want the ID of this particular

score 2 · Accepted Answer · edited May 23 '17 at 12:04

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

edited May 23 '17 at 12:04

Community

1
1

answered May 30 '12 at 17:06

zessx

68,042
28
135
158

Thank you. So there's no HTML/Javascript way to do this? I cannot just type ---> id="MYVARIABLE" ? – larin555 May 30 '12 at 17:07
jQuery is a Javascript library, which will simplify your life, your can do it without it too. – zessx May 30 '12 at 17:08
Ok. So I cannot just write -->
? Or something like that?

larin555

May 30 '12 at 17:10

Mmmh... depends of what you're doing. Why are you searching to change an id ? – zessx May 30 '12 at 17:12

Well it's not an ID I'm trying to change. I'm using custom attributes, so the real attribute I want to change is called PRICE. so

...that's what I wanted it to look like

– larin555 May 30 '12 at 17:23

freefaller · Answer 2 · 2012-05-30T17:19:46.460

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"

edited May 30 '12 at 17:19

answered May 30 '12 at 17:08

freefaller

19,368
7
57
87

Ok. I edited my first post, maybe it will help you understand what I'm looking for? – larin555 May 30 '12 at 17:59
Looks like you've got it sorted with samsamX, well done to you both. For future reference, say what you're after straight off... there's no point confusing people by asking for something different (and in this case something that didn't make sense) – freefaller May 30 '12 at 19:19

score 2 · Answer 3 · answered May 30 '12 at 17:14

2

You could use the JQuery attr method:

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

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

answered May 30 '12 at 17:14

Josh Noe

2,664
2
35
37

Ok. I edited my first post, maybe it will help you understand what I'm looking for? – larin555 May 30 '12 at 17:57

score 1 · Answer 4 · answered May 30 '12 at 17:09

1

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

you can use any name for attribute, you like

answered May 30 '12 at 17:09

Raab

34,778
4
50
65

score 1 · Answer 5 · answered May 30 '12 at 17:19

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

score 1 · Answer 6 · answered May 30 '12 at 18:07

1

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 :)!!

answered May 30 '12 at 18:07

unludo

4,912
7
47
71

Looking good. So that means the <%= text %> is in fact the TEXT variable? but as the ID, right? – larin555 May 30 '12 at 18:09

Attribute and Variable (Simple)

6 Answers6