Welcome to WebmasterWorld Guest from 54.205.88.118

Forum Moderators: open

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

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

5+ 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>&nbsp;</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>&nbsp;</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>

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

5+ 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>
4:49 am on Nov 26, 2008 (gmt 0)

5+ 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..

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

WebmasterWorld Senior Member penders is a WebmasterWorld Top Contributor of All Time 5+ 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?

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

WebmasterWorld Senior Member 5+ Year Member



The code between <textarea></textarea> never gets executed, including your <div onclick="getId(this.id)"> statements
9:08 am on Nov 26, 2008 (gmt 0)

5+ 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>&nbsp;</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>&nbsp;</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");
}

 

Featured Threads

Hot Threads This Week

Hot Threads This Month