javascript - passing a string to innerHTML

Question

This onmouseover 'lookdown' function works but the onmouseout 'lookup' function does not:

function lookdown(harvid) { harvid.innerHTML="See details below"; }
function lookup(harvid,crop) {harvid.innerHTML=crop;}

<td id="harv1244" onmouseover="lookdown(harv1244)"
onmouseout="lookup(harv1244,apples)">dummy</td>

This onmouseout function works (although, of course, it prints 'crop' and I want to pass in a string as I am trying to do above):

function lookup(harvid) {harvid.innerHTML="crop";}

<td id="harv1244" onmouseover="lookdown(harv1244)"
onmouseout="lookup(harv1244)">dummy</td>

Avoid this, really. You're relying on the browser creating global variables for your ids, and inline events are a source of errors. Add your events in JavaScript, querying your elements from the DOM and then using addEventListener. — elclanrs
– elclanrs, Commented Jul 15, 2014 at 2:54
apples isn't a string, but a variable. Does it hold a string value? — Bergi
– Bergi, Commented Jul 15, 2014 at 3:00
Mritunjay, apples is the word that I am passing to the lookup() function that I want inserted using innerHTML. — Dick Yates
– Dick Yates, Commented Jul 15, 2014 at 3:19

Steve · Accepted Answer · 2014-07-15 04:14:00Z

4

There are several issues with your code:

You are passing undeclared variables into your functions. apples and harvid are variables, not strings, and therefore undefined. You need to put those values in quotes to make them strings
harvid needs to either be a string or a node element. But you are not passing in either. Assuming you want it to be a string, you then need to find the DOM element using getElementById.

Here is a working solution:

Javascript:

function lookdown(harvid) { 
    document.getElementById(harvid).innerHTML="See details below"; 
}

function lookup(harvid,crop) {
    document.getElementById(harvid).innerHTML=crop;
}

HTML:

<div id="harv1244" onmouseover="lookdown('harv1244')"
onmouseout="lookup('harv1244','apples')">
    dummy
</div>

And here the associated fiddle: http://jsfiddle.net/pQM37/

EDIT:

To make this code a little cleaner, you could pass the element itself into the function, instead of the id, like this:

Javascript:

function lookdown(ele) { 
    ele.innerHTML="See details below"; 
}

function lookup(ele,crop) {
    ele.innerHTML=crop;
}

HTML:

<div id="harv1244" onmouseover="lookdown(this)"
onmouseout="lookup(this,'apples')">
    dummy
</div>

Fiddle: http://jsfiddle.net/pQM37/1/

edited Jul 15, 2014 at 4:14

answered Jul 15, 2014 at 3:53

Steve

8,6487 gold badges42 silver badges54 bronze badges

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

1 Comment

Dick Yates Over a year ago

That's perfect, Steve. Clear, two solutions, and a working example. Could not be better. Thanks.

Collectives™ on Stack Overflow

javascript - passing a string to innerHTML

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related