js variable on html code

Question

I have a javascript variable that I want to include it in my html code. The code is like this:

<a href="index.html"><img src="Images/Icones/Mes_commandes.png" alt="France" id="im1">MY_JS_VARIABLE</a></li>

How can I do?

What have you tried so far? I assume these kind of things should be covered by basic JavaScript tutorials. — Felix Kling, Mar 11 '12 at 11:58
Whatever you end up doing, please don't listen to anyone that tells you to use `document.write`. That is never the correct solution to this sort of problem. — Ben Lee, Mar 11 '12 at 12:02
@Ben: `document.write` is perfectly fine when it is used correctly. — Felix Kling, Mar 11 '12 at 12:09
@FelixKling, yes, but it has such a potential for abuse, *especially* for a problem like this, that I am speaking out against it preemptively. — Ben Lee, Mar 11 '12 at 12:10
To clarify my position: The use of `document.write` indicates that you may have larger architectural problems with your code, and *most of the time* using it actually encourages future architectural deficiencies. There are rare cases where using `document.write` is acceptable (especially in cases where it prevents an unnecessary round trip to the server), but usually it is a sign of something that could be done better. It's just as dldnh says: "...you either write the whole page using javascript or you make changes to it after it's written." — Ben Lee, Mar 11 '12 at 12:22
@BenLee, Look at my answer, and tell me how the piece of code can be used. — Starx, Mar 11 '12 at 12:25
@Starx, I don't really want to get into a holy war here, but since you asked, I'd argue that any use of document.write as a solution to this problem is an abuse. It has a number of potential negative performance implications and increase in bug potential and it's a textbook case of not properly dividing concerns in your code. Many of the reasons are covered here: http://stackoverflow.com/questions/802854/why-is-document-write-considered-a-bad-practice — Ben Lee, Mar 11 '12 at 12:33

score 2 · Accepted Answer · answered Mar 11 '12 at 12:25

If you use the after() function proposed in dldnh's solution, then it'll be hard to keep your code organized as you want javascript to do more on your page (you'll have to add everything in the after function since Javascript can only have one onload event handler).

If you plan to use more javascript on the page, a better option would be to use jQuery. Like so:

<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script>$(function() {
      $('#im1a').html(yourVariable);
    });
    </script>
  </head>
  <body>
    <li><a href="index.html"><img src="Images/Icones/Mes_commandes.png" alt="France" id="im1"></a><a id="im1a" href="index.html"></a></li>
  </body>
</html>

dldnh · Answer 2 · 2012-03-11T12:13:09.930

1

the timing can be a little tricky, because you either write the whole page using javascript or you make changes to it after it's written. here's what I would do. Write the HTML and after the content has loaded the after function will change the tag as you indicated.

<html>
<head>
<script type="text/javascript">
function after()
{
  var anchor = document.getElementById("im1a");
  anchor.innerHTML = "Inserted Text";
}
</script>
</head>
<body onload="after()">
<li><a href="index.html"><img src="Images/Icones/Mes_commandes.png" alt="France" id="im1"></a><a id="im1a" href="index.html"></a></li>
</body>
</html>

edited Mar 11 '12 at 12:13

answered Mar 11 '12 at 12:06

dldnh

8,745
3
33
50

sorry, I tested using Firefox, which was too forgiving of the mistake it contained. try it now. – dldnh Mar 11 '12 at 12:13

score 0 · Answer 3 · answered Mar 11 '12 at 12:00

0

The best way I have found is to just include that data in a hidden form element, and then my javascript can get it and use it. This way I can also have it behave in some appropriate fashion if javascript is turned off, by putting in a default value that will make sense.

My javascript code would replace that with the correct (for the given situation) value if javascript is enabled.

answered Mar 11 '12 at 12:00

James Black

40,548
9
79
153

I want just to use a js variable in my html code, something like this My js variable: – Mar 11 '12 at 12:13

score 0 · Answer 4 · answered Mar 11 '12 at 12:23

Here is a solution that builds a menu. This may be what you are looking for.

<ul id='country_menu'>
</ul>

<script>
var images = new Array();
images[0] = "Images/Icones/Mes_commandes.png";
images[1] = "Images/Icones/other.png";
images[2] = "Images/Icones/yetanother.png";

var captions = new Array();
captions[0] = "MY_JS_VARIABLE";
captions[1] = "other caption";
captions[2] = "yet another caption";

var options_html = "";

for (i = 0; i < images.length; i++)
{
    options_html += "<li>";
    options_html += "<a href='index.html'>";
    options_html += "<img src='"+images[i]+"' alt='"+captions[i]+"' />";
    options_html += captions[i];
    options_html += "</li>";
}

document.getElementById('country_menu').innerHTML = options_html;

</script>

js variable on html code

4 Answers4