Geek Answers Handbook

Call javascript function inside div

I would like to create a web page that contains several divs, each of which contains the same draw function with a different implementation (e.g. a common interface). After loading the page, I want to iterate over all divs and call each draw function one by one.

My page looks like this:

<html> <head> <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"> <script language="javascript" type="text/javascript" src="jquery-1.8.2.js"></script> </head> <body> <script type='text/javascript'> $( document ).ready( function() { // Draw all slots $('div.slot').each(function(i, d) { console.log('slot found: ' + d.id); // d.draw() does not work draw(); }); }); </script> <div class="slot" id="slot1"> <script type='text/javascript'> function draw() { console.log('Here we draw a circle'); }; </script> </div> <div class="slot" id="slot2"> <script type='text/javascript'> function draw() { console.log('Here we do something totally different and draw a rectangle'); }; </script> </div> </body> </html>

Unfortunately, I do not know how to call the draw function on the selected div "d". Now it calls only the last defined drawing function.

Update:

Keep in mind that I cannot combine different drawing methods into one that will receive a parameter, for example, the submitted form. Drawing methods will be completely independent of each other.

+6
source share
6 answers

The reason this happens is because you are rewriting the drawing function. Why don't you have a script page where you have an array of function pointers to the right:

 var array = (draw1, draw2, draw3, ...); function draw1() { //do your thing on div1 } ... function drawn() { //do your n thing on divn }

Now for your first div you need to call draw1, which is at index 1 of the array.

HTML:

 <div id="draw1"> </div> .... <div id="drawn">

What do you think. Note sytax has not been tested.

+1
source

You can call it like

HTML:

 <div class="slot" id="slot1">Draw1</div> <div class="slot" id="slot2">Draw2</div>

JS:

 function draw() { console.log('Drawed! '+$(this).attr('id')); } $( document ).ready( function() { $('div.slot').each(function(i, d) { console.log('slot found: ' + d.id); draw.call($(this)); }); });

An example .

+1
source

Why do you define scripts in div s?

Make your logic in one block script:

 <head> <script language="javascript" type="text/javascript" src="jquery-1.8.2.js"></script> </head> <body> <script type='text/javascript'> $( document ).ready( function() { // Draw all slots $('div.slot').each(function(i, d) { console.log('slot found: ' + d.id); // d.draw() does not work draw(); }); }); function draw(behavior) { console.log(behavior); } </script> <div class="slot" id="slot1" data-behavior="drew 1"> </div> <div class="slot" id="slot2" data-behavior="drew 2"> </div> </body> </html>

If you want to do something more complex, you should consider creating an object-oriented javascript application, with each block functionality coming from a class slot.

https://developer.mozilla.org/en-US/docs/JavaScript/Introduction_to_Object-Oriented_JavaScript

+1
source

The easiest way to find a “real OOP” in this case is to send all events at the document level:

create a simple object and load this object in main and in the form of a view:

 var events = {someCustomEventFromMain:'someCustomEventFromMain', someCustomEventFromView:'someCustomEventFromView'}

Now you can fire events in a document using jQuery, for example

 $(document).trigger(events.someCustomEventFromMain, somedata);

And you can listen to any view or div or

 $(document).on(events.someCustomEventFromMain, function(__e, __data){ //___e is the event emitted from __e.target //__data is the data object you wish to pass with the event //do something when event occurs });

So, if each index listens for some event at the document level, in your case "drawEvent", this should do the trick. You can even pass parameters in event data, such as a circle. Hope this helps.

+1
source 

 <html> <head> <script> $(document).ready( function() { $('#show').call(callfun()); }); </script> </head> <body> <h:form> <div id="show" align="center"> <script> function callfun(){ var data = "hi"; alert(data); } </script></div> </h:form> </body> </html>

I think that might work.

+1
source

Problem

You save the rewrite of window.draw() every time you redefine it. You either need a namespace for each (that is, attach it to a (otherwise empty) object), or give each function a separate name. There is no "div-scope" in Javascript;)

Decision

You can name each function according to the div id and dynamically call it using the syntax object["methodName"]() to call it.

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <html> <head> <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"> <script language="javascript" type="text/javascript" src="jquery-1.8.2.js"></script> </head> <body> <script type='text/javascript'> $( document ).ready( function() { // Draw all slots $('div.slot').each(function(i, d) { console.log('slot found: ' + d.id); // d.draw() does not work window[d.id]; }); }); </script> <div class="slot" id="slot1"> <script type='text/javascript'> function slot1() { console.log('Here we draw a circle'); }; </script> </div> <div class="slot" id="slot2"> <script type='text/javascript'> function slot2() { console.log('Here we do something totally different and draw a rectangle'); }; </script> </div> </body> </html>

http://jsbin.com/mogeluzicu/1/edit?html,console

+1
source

More articles:


All Articles