Embedding Javascript into an HTML parameter

Question

I am looking for the proper method to embed javascript into an html parameter. This is an example of what I am trying to do:

  <img src="source.png" height="<script> if(screen.width == 1920)
                                {document.write('60px');}</script>" 
                                 title="icon"/>

I know embedding PHP in this manner can work, but I can not seem to get it to work with Javascript. My limited knowledge on the matter is to blame, and I need some help resolving this issue. Thanks.

Are there any tricks or workarounds that would allow an application like this to work? — user981053
– user981053, Commented Dec 21, 2011 at 4:46

Jared Farrish · Accepted Answer · 2011-12-21 05:37:20Z

4

Note the id="sourceImg" I added to the element, which must be unique per element per page. Not doing this will mean Javascript will not know which element to select, and will pick one.

<img id="sourceImg" src="source.png" title="icon">

<script>
if (screen.width == 1920) {
    document.getElementById('sourceImg').style.height = '60px';
}
</script>

That either needs to run after the markup falls in the source of the page, or in a window.onload event handler. If it runs before the img element is available, it will error out.

NOTE - JohnFx's method that he describes in the comments below is:

<img id="sourceImg" src="source.png" title="icon" onload="sizeMe()">

<script>
function sizeMe() {
  if (screen.width == 1920) {
    document.getElementById('sourceImg').style.height = '60px';
  }
}
</script>

This uses the img element's onload handler. Note that inline event handlers like onload="", onclick="", etc., are typically considered hard to maintain. The above should work, however, as a demonstration, and other routes involve understanding page loading, DOM element availability and other details which are potentially more difficult to understand than a simple example.

EDIT

And, technically, you could do this:

<img id="sourceImg"
     onload="if(screen.width < 1920) this.style.width='60px';"
     src="http://upload.wikimedia.org/wikipedia/commons/thumb/a/ae/001_Jornal_Monsenhor_A_Comarca_23_de_Marco_de_1947.jpg/762px-001_Jornal_Monsenhor_A_Comarca_23_de_Marco_de_1947.jpg"
     title="icon">

http://jsfiddle.net/pdN3y/

Note, I changed the if statement to make the change more obvious.

But please don't. It's a bad idea and a bad habit to get into. Spend some time figuring out page loading and DOM availability, it's time well spent.

edited Dec 21, 2011 at 5:37

answered Dec 21, 2011 at 4:45

Jared Farrish

49.4k17 gold badges100 silver badges108 bronze badges

Sign up to request clarification or add additional context in comments.

11 Comments

keybored Over a year ago

This is indeed the correct method, you cannot embed Javascript inside HTML tags.

JohnFx Over a year ago

You might want to add this to a that executes only after the DOM element has loaded.

user981053 Over a year ago

Thank you for providing me with a proper method.

Jared Farrish Over a year ago

@JohnFx - I understand your point, but a function by itself won't fix it unless it runs after the element is available (either after the img falls in the source code, or in an event which calls the code afterwards).

Jared Farrish Over a year ago

@JohnFx - Yeah, no document.write. A document.createElement is modern, may not be a bad idea (although finding where to put it could be tricky with just DOM methods, something jQuery makes really simple). If you trust CSS media queries, this could be solved without any Javascript and be completely unobtrusive.

|

drdwilcox · Accepted Answer · 2011-12-21 04:47:46Z

0

You cannot do it that way. You are correct - your PHP is interfering. There are lots of ways to do this, just changing your approach:

<script>
    document.write("<img src='source.png' title='icon' " + screen.width == 1920 ? "height='60px'" : "" + " />");
</script>

answered Dec 21, 2011 at 4:47

drdwilcox

3,96121 silver badges19 bronze badges

2 Comments

Jared Farrish Over a year ago

Oh I don't know that document.writeing the element out is really a modern practice, with so many more appropriate methods available...

drdwilcox Over a year ago

I absolutely agree. Like I said, I was just correcting his approach so that it worked. The transition from one language to another is a very personal experience, and sometimes it can b helpful to see an idiom you know translated into the new language, even if it is not an "acceptable" idiom in the new language.

Collectives™ on Stack Overflow

Embedding Javascript into an HTML parameter

2 Answers 2

11 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

11 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related