如何将运行时参数从html代码传递给javascript函数

时间:2017-06-18 00:08:38

标签: javascript html css

重点是通过更改元素的背景颜色来关注鼠标移动时网页的特定元素。

html如下:

<html>
<head>
<base src="..... />
<script>....</script>
<link..../>
<title></title>
</head>
<body>
<p style="font-size:20px;font-weight:bold"> Enter values or choose options 
in the form below .</p>
<div id="d1">

<form id="f1" action="" method="post">
<fieldset>
    <legend><a name="pdet"></a>Personal Details</legend>
    <table id="t1" width="400" height="auto" rows="4" cols="2">
        <tr id="tr1" onMouseMove ="focus(tr1)" onMouseOut ="original(tr1)">
            <td><label for="fname">First Name :<label></td>
            <td><input type="text" id="fname" col="30"></input></td>
        </tr>
        <tr id="tr2" onMouseMove ="focus(tr2)" onMouseOut ="original(tr2)">
            <td><label for="lname">Last Name : </label></td>
            <td><input type="text" id="lname" col="30"></input></td>                
        </tr>
    </table>
</fieldset>
</form>
</div>
<br/>
</body>
</html>

javascript函数如下

function focus(e_id){
var element = document.getElementById("e_id").style.backgroundColor ="blue";
}

function original(e_id){
var element = document.getElementById("e_id").style.backgroundColor="green";
}

通过使用'focus(this)'或'focus(this.id)'作为参数分别传递元素本身或元素的id,阅读前面的相同主题的ans。尝试过,但没有用。

任何人都可以帮我解决这个问题吗?

2 个答案:

答案 0 :(得分:1)

我认为您的主要问题可能是您使用"e_id"(字符串)而不是e_id(变量标识符)。

答案 1 :(得分:0)

这只是引号使用不正确的问题。

&#13;
&#13;
function elfocus(e_id){
// do not use quotes around e_id in order to use the function argument
var element = document.getElementById(e_id).style.backgroundColor ="blue";
}

function original(e_id){
var element = document.getElementById(e_id).style.backgroundColor="green";
}
&#13;
<p style="font-size:20px;font-weight:bold"> Enter values or choose options 
in the form below .</p>
<div id="d1">

<form id="f1" action="" method="post">
<fieldset>
    <legend><a name="pdet"></a>Personal Details</legend>
    <table id="t1" width="400" height="auto" rows="4" cols="2">
        <tr id="tr1" onMouseMove ="elfocus('tr1')" onMouseOut ="original('tr1')">
        <!-- put single quotes arount tr1 so that it is passed as a string -->
            <td><label for="fname">First Name :<label></td>
            <td><input type="text" id="fname" col="30"></input></td>
        </tr>
        <tr id="tr2" onMouseMove ="elfocus('tr2')" onMouseOut ="original('tr2')">
            <td><label for="lname">Last Name : </label></td>
            <td><input type="text" id="lname" col="30"></input></td>                
        </tr>
    </table>
</fieldset>
</form>
</div>
<br/>
&#13;
&#13;
&#13;

此外,我重命名了焦点函数,因为window.focus已经是一个现有函数,因此事件监听器可能不会使用您的实现。