SitePoint Sponsor

User Tag List

Results 1 to 15 of 15
  1. #1
    SitePoint Enthusiast
    Join Date
    Apr 2007
    Posts
    62
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Javascript code that reads if a link has been clicked

    Javascript code that reads if a link has been clicked

    I have a simple bit of code (contained in a CMS and cant be edited) that and needs to be read by Javascript in the header if it has been clicked.

    Here is the code:

    HTML Code:
    <div id="example" class="page-element-outer" style="text-align: left"><div class="page-element-inner" ><input type="image" name="Button1" id="Button" src="/getresource.axd?AssetID=16813" alt="Submit" style="text-align:left;" /></div></div>
    Can you assist?

    C

  2. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,938
    Mentioned
    214 Post(s)
    Tagged
    12 Thread(s)
    You could attach an onclick event handler to make something happen when the button is clicked.
    Is that what you mean?

  3. #3
    SitePoint Enthusiast
    Join Date
    Apr 2007
    Posts
    62
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No i need to work on the Javascript in the header only. The button code is a plugin for a cms and i have no access to add anything to it. I only have the header and Javascript to work with.
    Thanks mate

  4. #4
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,938
    Mentioned
    214 Post(s)
    Tagged
    12 Thread(s)
    How is the button being included?
    Can you provide a link to the page in question?

  5. #5
    SitePoint Enthusiast
    Join Date
    Apr 2007
    Posts
    62
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm afraid I cant as it is only on my dev box.
    I can paste some code?

  6. #6
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,938
    Mentioned
    214 Post(s)
    Tagged
    12 Thread(s)
    Yeah, that's cool.
    Go ahead.

  7. #7
    SitePoint Enthusiast
    Join Date
    Apr 2007
    Posts
    62
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Cool, thanks alot mate
    Here the JS i've developed:

    Code JavaScript:
    <script type="text/javascript">
    document.getElementById("Button").addEventListener("click", callback, true);
     
    function callback() {
       alert("clicked");
     
       return false;
    }
    </script>

    and here the button code that i can't edit at all

    Code HTML4Strict:
    <div id="example" class="page-element-outer" style="text-align: left"><div class="page-element-inner" ><input type="image" name="Button1" id="Button" src="/getresource.axd?AssetID=16813" alt="Submit" style="text-align:left;" /></div></div>
    Last edited by TechnoBear; Nov 22, 2012 at 07:45. Reason: Code tags added

  8. #8
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,938
    Mentioned
    214 Post(s)
    Tagged
    12 Thread(s)
    Hi,

    Could you put code tags around the code, please. (Edit post - Go Advanced - Choose Syntax).
    It makes it easier to read.

    So, I'm not getting you. The code you posted looks fine to me.
    What's not working?

  9. #9
    SitePoint Enthusiast
    Join Date
    Apr 2007
    Posts
    62
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh OK
    I thought it was wrong, and it may not work in IE
    Code:
    <script type="text/javascript">
    document.getElementById("Button").addEventListener("click", callback, true);
    
    function callback() {
       alert("clicked");
    
       return false;
    }
    </script>
    Thanks Pullo

  10. #10
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,938
    Mentioned
    214 Post(s)
    Tagged
    12 Thread(s)
    Hi there,

    Yup, my mistake, it was broken in IE 8 and below.
    Try this, it should work in all browsers:

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Onclick</title>
        <script type="text/javascript">
          window.onload = function(){
            document.getElementById("Button").onclick = function() {
              alert("clicked");
              return false;
            }
          }
        </script> 
      </head>
      
      <body>
        <div id="example" class="page-element-outer" style="text-align: left">
          <div class="page-element-inner" >
            <input type="image" name="Button1" id="Button" src="/getresource.axd?AssetID=16813" alt="Submit" style="text-align:left;" />
          </div>
        </div>
      </body>
    </html>
    Hope that helps.

  11. #11
    SitePoint Enthusiast
    Join Date
    Apr 2007
    Posts
    62
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Pullo, thank you so much.

  12. #12
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,938
    Mentioned
    214 Post(s)
    Tagged
    12 Thread(s)
    Happy to help

  13. #13
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,799
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Pullo View Post
    Hi there,

    Yup, my mistake, it was broken in IE 8 and below.
    Try this, it should work in all browsers:

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Onclick</title>
        <script type="text/javascript">
          window.onload = function(){
            document.getElementById("Button").onclick = function() {
              alert("clicked");
              return false;
            }
          }
        </script> 
      </head>
      
      <body>
        <div id="example" class="page-element-outer" style="text-align: left">
          <div class="page-element-inner" >
            <input type="image" name="Button1" id="Button" src="/getresource.axd?AssetID=16813" alt="Submit" style="text-align:left;" />
          </div>
        </div>
      </body>
    </html>
    Hope that helps.

    You are inserting the JavaScript in the wrong place in the page and so need extra JavaScript to delay the script running until after the point where you should have attached the JavaScript. JavaScript should be attached immediately before the </body> tag. It should only ever go in the head if the code is testing whether to allow the current page to display or to load a different one without loading this one.

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Onclick</title>
      </head>
      
      <body>
        <div id="example" class="page-element-outer" style="text-align: left">
          <div class="page-element-inner" >
            <input type="image" name="Button1" id="Button" src="/getresource.axd?AssetID=16813" alt="Submit" style="text-align:left;" />
          </div>
        </div>
        <script type="text/javascript">
            document.getElementById("Button").onclick = function() {
              alert("clicked");
              return false;
            }
        </script> 
      </body>
    </html>
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  14. #14
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,938
    Mentioned
    214 Post(s)
    Tagged
    12 Thread(s)
    Quote Originally Posted by felgall View Post
    JavaScript should be attached immediately before the </body> tag.
    This is true, but I figured the OP wanted it in the head for whatever reason.

    Quote Originally Posted by jelly46 View Post
    ... that and needs to be read by Javascript in the header if it has been clicked

  15. #15
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,799
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Pullo View Post
    This is true, but I figured the OP wanted it in the head for whatever reason.
    Probably just copying all the JavaScript that was written for Netscape 2, 3 and 4 where the JavaScript mostly went in the head rather than working with more modern browsers such as IE5+ that work better with the JavaScript at the bottom of the body.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •