Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Find the tag JavaScript is running in

Generating HTML source on backend, I am using separate independent widgets.

I am simply including pieces of markup like this to the resulting HTML output.

 <div>
     I want to work with this DOM element
     <script>
          new Obj(/*but I can't get this <div> as a parameter! */);
     </script>
 </div>

I'm looking for a way to find the DOM element in which the obj is created (Without any unique IDs). This would add flexibility to my app and speed up the development. But is that technicaly possible in JavaScript?

like image 628
Dan Avatar asked Dec 13 '12 19:12

Dan


People also ask

How do you check which JS is running?

Under Chrome's Elements view, try Inspect-ing an element (right-click, Inspect); then, on the right side of the developer view, scroll down to Event Listeners.

How do you check JavaScript in HTML?

For most browsers, to view inline JavaScript in the HTML source code, do one of the following. Press the Ctrl + U keyboard shortcut. Right-click an empty area on the web page and select the View page source or similar option in the pop-up menu.

What is the tag for JavaScript?

The HTML <script> tag is used to define a client-side script (JavaScript). The <script> element either contains script statements, or it points to an external script file through the src attribute. Common uses for JavaScript are image manipulation, form validation, and dynamic changes of content.

How do you find out which JavaScript Events fired?

Using Developer ToolsGo to the sources tab. Click on the Event Listener Breakpoints, on the right side. Then perform the activity that will trigger the event, i.e. click if the event that used is click, double click if it is dblclick event.


2 Answers

You could seed an element in there and then get it's parent, and then remove the element.

<div>
 I want to work with this DOM element
 <script>
      document.write("<div id='UniqueGUID_3477zZ7786_' style='display:none;'></div>");
      var thatDivYouWanted;
      (function(){
       var target = document.getElementById("UniqueGUID_3477zZ7786_");
       thatDivYouWanted = target.parentNode;
       target.parentNode.removeChild(target);
      })();
      new Obj(/*but I can't get this <div> as a parameter! */);
 </script>
</div>
like image 156
Travis J Avatar answered Oct 01 '22 00:10

Travis J


The following code works:

<script>
  function Obj(color) {
    var scriptTags = document.getElementsByTagName("script");
    var scriptTag = scriptTags[scriptTags.length - 1];
    // find parent or do whatsoever
    var divTag = scriptTag.parentNode;
    divTag.style.backgroundColor = color;
  }
</script>


<div>
  I want to work with this DOM element
  <script>new Obj("green");</script>
</div>
<div>
  I want to work with this DOM element
  <script>new Obj("yellow");</script>
</div>
<div>
  I want to work with this DOM element
  <script>new Obj("lime");</script>
</div>

This method has very simple code and has almost zero impact on performance.

Note: I am pretty sure this won't work IE6 (as far as I remember it does not support manipulating open tags).

like image 27
Salman A Avatar answered Sep 30 '22 23:09

Salman A