简体   繁体   English

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

[英]how to pass a runtime parameter from html code to javascript function

the point was to get focus on a particular element of a webpage on mouse move by changing the background color of the element. 关键是要通过更改元素的背景颜色来专注于鼠标移动时网页的特定元素。

The html is as follows: 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>

The javascript functions are as follows 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";
}

Read the previous ans on the same topic where it was suggested to do so by using 'focus(this)' or 'focus(this.id)' as arguments to pass the element itself or the id of the element respectively. 建议使用“ focus(this)”或“ focus(this.id)”作为参数分别传递元素本身或元素ID,以阅读有关该主题的先前文章。 Tried it but it did not work. 尝试过,但没有用。

can anyone help me resolve this? 谁能帮我解决这个问题?

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

It's just a problem with incorrect usage of quotes. 这是使用不正确的引号的问题。

 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"; } 
 <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/> 

Also I renamed the focus function, because window.focus is an existing function already so the event listeners might not use your implementation. 我还重命名了focus函数,因为window.focus已经是一个现有函数,因此事件侦听器可能不会使用您的实现。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM