javascript - 将字符串传递给 innerHTML

Question

这个 onmouseover 'lookdown' 函数有效，但 onmouseout 'lookup' 函数无效:

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>

这个 onmouseout 函数有效(当然，它会打印“crop”，我想像上面那样传递一个字符串):

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

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

Answer 1

您的代码有几个问题:

• 您正在将未声明的变量传递到您的函数中。 apples 和 harvid 是变量，不是字符串，因此未定义。您需要将这些值放在引号中以使其成为字符串

• harvid 需要是字符串或节点元素。但是你也没有通过。假设您希望它是一个字符串，那么您需要使用 getElementById 找到 DOM 元素。

这是一个可行的解决方案:

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>

这里是相关的 fiddle :http://jsfiddle.net/pQM37/

编辑:

为了使这段代码更简洁一些，您可以将元素本身而不是 id 传递给函数，如下所示:

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/