How to Call a javascript function from the DIV tag of HTML - JavaScript and AJAX forum at WebmasterWorld - WebmasterWorld

Forum Moderators: open

Message Too Old, No Replies

How to Call a javascript function from the DIV tag of HTML

Roudra

12:03 pm on Nov 25, 2008 (gmt 0)

10+ Year Member

Hi, i am trying to call a javascript function from within a div tag on click of it. while calling the function i intend to pass the id of the div as an object to the called function. I have the below code in HTML.Using this code, when i click on the DIV in the HTML, the javascript function is not getting called. Please advise...

<body>
<div id="Header" style="display:block; float:left; width:100%; clear:both;" >
<img src="ToolImages/Oracle.gif" alt="Oracle Logo" style="float:left" >

</div>

<div class="tabber" id="tab1">

<div class="tabbertab">
<h2><a name="tab1">Templates</a></h2>
<div class="tabber" id="tab1-1">

<div class="tabbertab">
<h3>Landing Page</h3>

<textarea class="HTMLArea" name="EditLandingPage" >
<link href="Theme/Flexblue.css" rel="stylesheet" type="text/css">
<link href="Theme/en.css" rel="stylesheet" type="text/css">
<br>
<body class="BODYLanding">

<table title="Menu Bar" class="TABLELogoBar" id="TABLELogoBar" width="100%" border="0" cellspacing="0" cellpadding="0" style="border:1px dotted red">
<tr>
<td> </td>
</tr>
</table>

<table title="Tool Bar" id="TABLEToolBar" style="height:32px;border:1px dotted red" width="100%" border="0" cellspacing="0" cellpadding="0" summary="Tool Bar">
<tr>
<td> </td>
</tr>
</table>

<div id="DIVNavPane" onclick="getId(this.id)" class="DIVNavPane" style="height:600px;border:1px dotted red" title="Left Pane" >

</div>

<div id="DIVTaskArea" onclick="getId(this.id)" class="DIVTaskArea" style="height:600px;border:1px dotted red" title="Task Area" >

</div>

</body>

</textarea><br>

astupidname

4:03 pm on Nov 25, 2008 (gmt 0)

10+ Year Member

About the only real problems I see is that you have two different opening body tags in there and a closing body tag before your closing textarea tag. Other than that, you have not shown what your getId() function looks like. If it looks something like this your function calls should work ok:
<script type="text/javascript">
function getId(id){
var a = document.getElementById(id);
alert(a.id);
}
</script>

Roudra

4:49 am on Nov 26, 2008 (gmt 0)

10+ Year Member

Regarding the Body tags: I had not pasted the entire HTML hence the open bidy tag present.
My HTML in which i have the DIVs are in the text area of another HTML.
I have a separate JS file that is called from this HTML. and within that file i have the getId() being called.
I have copied the function below.
function getId(id) {
var a = document.getElementById(id);
alert(a.id);
}

But the problem is that on clicking on this DIV, The function is not getting called. Please suggest..

penders

8:42 am on Nov 26, 2008 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Top Contributors Of The Month

Regarding the Body tags: I had not pasted the entire HTML hence the open bidy tag present.
My HTML in which i have the DIVs are in the text area of another HTML.

I'm not sure what you mean or what you are trying to achieve here? Certainly having 2 body elements (one inside a textarea element) is not valid HTML and is quite probably the cause of your problem.

Do you want the content inside your TEXTAREA to be editable text OR/ part of the DOM in the parent document?

caribguy

8:50 am on Nov 26, 2008 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

The code between <textarea></textarea> never gets executed, including your <div onclick="getId(this.id)"> statements

Roudra

9:08 am on Nov 26, 2008 (gmt 0)

10+ Year Member

I have modified it and now the HTML is like Below:

<body>
<div id="Header" style="display:block; float:left; width:100%; clear:both;" >

</div>

<div class="tabber" id="tab1">

<div class="tabbertab">
<h2><a name="tab1">Templates</a></h2>
<div class="tabber" id="tab1-1">

<div class="tabbertab">
<h3>Landing Page</h3>

<textarea class="HTMLArea" name="EditLandingPage" >
<link href="Theme/Flexblue.css" rel="stylesheet" type="text/css">
<link href="Theme/en.css" rel="stylesheet" type="text/css">
<br>
<body class="BODYLanding">

<table title="Menu Bar" class="TABLELogoBar" id="TABLELogoBar" width="100%" border="0" cellspacing="0" cellpadding="0" style="border:1px dotted red">
<tr>
<td> </td>
</tr>
</table>

<table title="Tool Bar" id="TABLEToolBar" style="height:32px;border:1px dotted red" width="100%" border="0" cellspacing="0" cellpadding="0" summary="Tool Bar">
<tr>
<td> </td>
</tr>
</table>

<div id="DIVNavPane" class="DIVNavPane" style="height:600px;border:1px dotted red" title="Left Pane" >
<script language="javascript1.2">
document.getElementById('DIVNavPane').onclick = function() {
alert('DIVNavPane');
fnGetId();

}
</script>

</div>

<div id="DIVTaskArea" class="DIVTaskArea" style="height:600px;border:1px dotted red" title="Task Area" >

</div>

</body>

</textarea><br>

i am able to get the alert msg... but when it comes to calling the function.. it gives me an object expedted error...

the JS function is below...

function fnGetId() {

alert("DIVNavPane");
}