how to pass a runtime parameter from html code to javascript function

Question

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>
<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

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. Tried it but it did not work.

can anyone help me resolve this?

"e_id" is a string, not a reference to the variable
– epascarello
Commented Jun 18, 2017 at 0:10 — epascarello, Commented Jun 18, 2017 at 0:10

yoniLavi · Accepted Answer · 2017-06-18 00:12:59Z

1

I think your main issue might be that you're using "e_id" (a string) rather than e_id (a variable identifier).

answered Jun 18, 2017 at 0:12

yoniLavi

2,7621 gold badge27 silver badges31 bronze badges

Add a comment |

Patrick Günther · Accepted Answer · 2017-06-18 00:41:03Z

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.

Collectives™ on Stack Overflow

how to pass a runtime parameter from html code to javascript function

2 Answers 2

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Related