Javascript function unable to access CSS styling

Question

I can't figure out why the Javascript function below is unable to access any of the CSS styling! The demo script's idea is for a small menu of options to appear at mouse coordinates when you Right-click. Code follows...

      <style type="text/css">

      .MiniMenuText {
      Font-family: "Comic Sans MS";
      Font-size: 11px;
      Font-weight: Normal;
      Font-style: Normal;
      Text-decoration: None;
      Text-align: Left;
      Color: #FFFFFF;
      Height:0;}

      .MiniMenuBox {
      -moz-box-shadow: 3px 3px 4px #000;
      -webkit-box-shadow: 3px 3px 4px #000;
      box-shadow: 3px 3px 4px #000;
      Padding: 1px;
      Width: 175px;
      Height: 80px;
      Background-color: #686868;
      Border-style: Solid;
      Border-color: #A0AAA0;
      Border-width: 1px;
      Text-align: Center;}

      <!--
      A:hover {Color:Black; Background-color:#FFFFFF;}
      -->

      </style>

<script type="text/javascript">

      function RunMiniMenu() {

      var X=window.event.clientX;
      var Y=window.event.clientY;

      document.write('<div Class="MiniMenuBox"; Style="Position:Absolute; Left:'+X+'px;              Top:'+Y+'px;";>');
      document.write('<a Href=""; Target="_blank"; Class="MiniMenuText";>Option 1</a><br>');
      document.write('<a Href=""; Target="_blank"; Class="MiniMenuText";>Option 2</a><br>');
      document.write('<a Href=""; Target="_blank"; Class="MiniMenuText";>Option 3</a><br>');
      document.write('<a Href=""; Target="_blank"; Class="MiniMenuText";>Option 4</a><br>');
      document.write('<a Href=""; Target="_blank"; Class="MiniMenuText";>Option 5</a></div>');
      }

      </script>

      <body oncontextmenu="RunMiniMenu(); return false;"; </body>

I'm not getting any errors but styling is completely missing! — John Citizen
– John Citizen, Commented Oct 26, 2012 at 14:11
You can't use document.write in event handler, or anywhere after the document is loaded. — duri
– duri, Commented Oct 26, 2012 at 14:12
@duri I vote for deprecating document.write in its entirety ;-) — John Dvorak
– John Dvorak, Commented Oct 26, 2012 at 14:15
Jan's right. Forget about document.write. It's a bane. Better use one of the many JavaScript templating libraries (which I happen to wrote one, hehe => aefxx.com/jquery-plugins/jqote2). — aefxx
– aefxx, Commented Oct 26, 2012 at 14:17

aefxx · Accepted Answer · 2012-10-26 14:42:21Z

2

One error is the ; you put after every HTML attribute. The other one is mentioned by Michael Berkowski (the missing > within the body tag).

One more thing to keep in mind: When you write to the document AFTER the page has fully loaded (i.e. after the document is closed), a write to it will yield a new document that lacks the styles.

EDIT

<style>
    /* Your styles here */
</style>

...
<body oncontextmenu="runMiniMenu();">
    <!-- Whatever markup you need comes here! -->

    <script type="text/javascript">
        function runMiniMenu(e) {
            var X = e.clientX,
                Y = e.clientY;

            var div = document.createElement('div');

            div.createAttribute('class', 'MiniMenuBox');
            div.createAttribute('style', 'position: absolute; left:'+X+'px ...

            for ( var i=1; i < 6; i++ ) {
                var a = document.createElement('a');
                a.createAttribute('target', '_blank');

                // You get the point!
                ...

                div.appendChild(a);
            }

            document.getElementsByTagName("body")[0].appendChild(div);

            return false;
        }
    </script>
</body>

edited Oct 26, 2012 at 14:42

answered Oct 26, 2012 at 14:09

aefxx

25.4k6 gold badges47 silver badges55 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

John Citizen Over a year ago

I've just tested that if I close the body tag with a > it doesn't work! :)

John Citizen Over a year ago

Btw, I also tested that removing the ; after attributes makes no difference.

aefxx Over a year ago

I know, these are syntax errors that browsers silently drop (nevertheless, you shouldn't do them in the first place). The real problem is that you are opening the document again, writing to it after it has been closed

John Citizen Over a year ago

Thanks for your code also, I’ll test it later because now I gotta rush to my wife’s b-day party! :)

Ryan · Accepted Answer · 2012-10-26 14:45:26Z

0

Everyone is correct about the errors in your syntax and about document.write. Abandon document.write and you will be much better off.

If you are simply trying to put that html in the body tag after the page loads then I would use innerHTML

So it would look like this:

<script type="text/javascript">

  function RunMiniMenu() {

  var X=window.event.clientX;
  var Y=window.event.clientY;
  var body = document.getElementsByTagName("body");

  body.innerHTML = "<div class='MiniMenuBox' style='position:absolute; left:"+X+"px;
          top:"+Y+"px;'><a href=''; target='_blank'; class='MiniMenuText'>Option 1</a><br/></div>";
  }

  </script>

  <body onload="RunMiniMenu(); return false;"> </body>

answered Oct 26, 2012 at 14:45

Ryan

5,6823 gold badges40 silver badges66 bronze badges

2 Comments

John Citizen Over a year ago

Please note that the little menu is intended to be called when certain buttons are Right-clicked. Everywhere else on the screen the browser’s default right-click menu function is ok. That’s why I wasn’t after an event handler etc.

John Citizen Over a year ago

Thanks, but your method is returning two errors: 1. Uncaught SyntaxError: Unexpected token ILLEGAL Highlighting the line "body.innerHTML..." and 2. Uncaught ReferenceError: RunMiniMenu is not defined Highlighting the line "<body onload=...."

Collectives™ on Stack Overflow

Javascript function unable to access CSS styling

2 Answers 2

4 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related