Javascript inline display difference across browsers?

Question

I have the following inline Javascript code:

<a href="javascript:{ document['example'].src = 'cube.png'; document.getElementById('constructor').innerHTML = 'Mesh mesh = new Mesh.Cube();'; }">Cube</a>

For your poor tired programmer eyes, here's the expanded version:

document['example'].src = 'cube.png';
document.getElementById('constructor').innerHTML = 'Mesh mesh = new Mesh.Cube();';

This code acts as a hyperlink that changes the example image to an image of a 3D cube and changes a <pre id="constructor">'s content to the appropriate constructor. (This is obviously a tutorial page).

This works perfectly fine in Chrome, but in other browsers, I get either a new page or the whole page's content changed to:

Mesh mesh = new Mesh.Cube();

What is the problem with the code? What puzzles me is that it's valid in a browser and not in another. It's as if the script couldn't find the 'constructor' element and proposed the whole page as a fallback. I'm far from being a Javascript expert, so that's just a wild guess.

NB: `document['example']` is not a good way to reference an image. I assume it's the `name` of an image, then you should be using `document.images['example']`, or use an `id` and `getElementById` instead. — RoToRa, Jan 16 '11 at 22:56

score 1 · Answer 1 · answered Jan 16 '11 at 22:11

Well I must say I've never seen this kind of notation in an anchor link, using the braket to put some code in it I mean.

I tried in Chrome, it did work indeed, but not in FireFox.

You may want to try like that though:

href="javascript:(function(){ document['example'].src = 'cube.png'; document.getElementById('constructor').innerHTML = 'Mesh mesh = new Mesh.Cube();'; })()"

But to be honest I would just create an helper function and call it directly like:

href="javascript:myFunction('Cube')"

Or something like that (even better would be to dynamically attach an event listener to the anchor link)

Oh well, perhaps it's just not legal code. I coded a function that indeed does it for me. Thanks! :) — Lazlo, Jan 16 '11 at 22:24

Šime Vidas · Answer 2 · 2011-01-16T22:18:58.827

1

Try this:

<a href="#" onclick="foo(); return false;">Cube</a>

In your JavaScript code:

function foo () {
    document['example'].src = 'cube.png';
    document.getElementById('constructor').innerHTML = 'Mesh mesh = new Mesh.Cube();
}

edited Jan 16 '11 at 22:18

answered Jan 16 '11 at 22:12

Šime Vidas

182,163
62
281
385

You would also need to adjust your CSS so that it makes the a element look like a link: style="color:blue;text-decoration:underlined;cursor:pointer;cursor:hand;" – jamesmortensen Jan 16 '11 at 22:17
@jmort That's unrelated. However, text-decoration:underline, not underlined. Also, you are setting the cursor property twice which doesn't make sense. – Šime Vidas Jan 16 '11 at 22:22
The onclick is really unrelated. I want it to be a link which causes a Javascript action. Why would I attach an event? Oh well, I got it fixed anyway. – Lazlo Jan 16 '11 at 22:24
@Lazlo You want to execute JavaScript code when the user clicks on the link. The proper way to do this is to use the `onclick` attribute, not the `href` attribute. – Šime Vidas Jan 16 '11 at 22:30
@Lazlo Check out this article: http://stackoverflow.com/questions/245868/what-is-the-difference-between-the-different-methods-of-putting-javascript-in-an Here it is explained why onclick is the proper way to do it. – Šime Vidas Jan 16 '11 at 22:32

score 0 · Accepted Answer · answered Jan 16 '11 at 22:33

I will just answer "What is the problem with the code?"

The href behaves differently than any onXXX event (hence javascript: protocol). It kind of tries to load new document and put something inside. The worst thing, it catches all output. So, to make it work as-is, you need to catch all statement values as assignments:


var x = document['example'].src = 'cube.png';
var y = document.getElementById('constructor').innerHTML = 'Mesh mesh = new Mesh.Cube();';

all in javascript:{...} of course.

Also some good comments and explanations here: http://www.west-wind.com/weblog/posts/9899.aspx

Javascript inline display difference across browsers?

3 Answers3