homepage Welcome to WebmasterWorld Guest from 54.227.40.166
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

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




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

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>

 

astupidname




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

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




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

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




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

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




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

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

Roudra




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

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

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved