javascript - passing a string to innerHTML - Stack Overflow

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>

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>

• javascript
• parameter-passing
• innerhtml

Share Improve this question Follow asked Jul 15, 2014 at 2:52 Dick YatesDick Yates 9711 silver badge99 bronze badges 6

• 1 what is apples here ? – Mritunjay Commented Jul 15, 2014 at 2:54
• 1 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 Commented Jul 15, 2014 at 2:54
• 1 apples isn't a string, but a variable. Does it hold a string value? – 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 Commented Jul 15, 2014 at 3:19
• elclans, I don't know what any of that means. – Dick Yates Commented Jul 15, 2014 at 3:21

 |  Show 1 more ment

1 Answer 1

Sorted by: Reset to default 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/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/pQM37/1/