JS: Handling event

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • Pete90
    New Member
    • Jan 2007
    • 12
    #1

    JS: Handling event

    There are some js syntax on Event handling which i am not familiar, what could be wrong with the codes below? The words are suppose to change when the mouse move in & out...

    <head>
    <style>
    #bannertext {font-family:"Verdana ";}
    </style>

    <script language="javas cript">

    // Not sure if the below syntax is correct?

    function changeColor(ele ment,color){
    element.style.c olor=color;
    }
    function changeCursor(el ement,cursor){
    element.style.c ursor="hand";
    }
    function changeContent(e lement,content) {
    element.style.c ontent=content;
    }
    function changeSize(elem ent, size){
    element.style.s ize=size;
    }

    </script>
    </head>
    <body>

    <!-- I know below codes contain multiple mouse events within a single span & erranous but not sure how to write them -->

    <SPAN id="bannertext " onmouseout="cha ngeColor(#banne rtext,'blue'); changeContent(b annertext, 'Click me...'); changeSize(bann ertext, 20);"

    onmouseover="ch angeText(banner text,'red'); changeContent(# bannertext, 'Do not Click Me');changeSize (bannertext, 30); changeCursor(th is)";

    onclick="clickT ext(bannertext, 'green'); changeContent(# bannertext, 'Some text');changeSi ze(bannertext, 50)";>

    Click here to proceed...
    </SPAN>
    Tags: None
    • iam_clint
      Recognized Expert Top Contributor
      • Jul 2006
      • 1207
      #2
      fixed you up a bit good luck
      Code:
      <head>
<style>
#bannertext {font-family:"Verdana";}
</style>
<script language="javascript">
// Not sure if the below syntax is correct?
function changeColor(element,color){
element.style.color=color;
}
function changeCursor(element,cursor){
element.style.cursor="hand";
}
function changeContent(element,content){
element.style.content=content;
}
function changeSize(element, size){
element.style.size=size;
}
</script>
</head>
<body>
<!-- I know below codes contain multiple mouse events within a single span & erranous but not sure how to write them --> 
<SPAN id="bannertext" onmouseout="changeColor(this,'blue'); changeContent(bannertext, 'Click me...'); changeSize(this, 20);"
onmouseover="changeColor(this,'red'); changeContent(this, 'Do not Click Me'); changeSize(this, 30); changeCursor(this)"; 
onclick="changeColor(bannertext,'green'); changeContent(this, 'Some text');changeSize(this, 50)";>
Click here to proceed...
</SPAN>

        Comment

        • Pete90
          New Member
          • Jan 2007
          • 12
          #3
          Thanks, however the text still remain the same. What is the reason?

            Comment

            • acoder
              Recognized Expert MVP
              • Nov 2006
              • 16032
              #4
              Originally posted by Pete90
              Thanks, however the text still remain the same. What is the reason?
              There's a few mistakes. You can't use content to change content. Use innerHTMl (non-standard) or something similar to change the content. If using innerHTML, use without style directly on the span.

              'hand' is not valid, you have to use 'pointer' instead. Your function is not called correctly too.

              Instead of size, use fontSize.

              That should solve your problems.

                Comment

                • Pete90
                  New Member
                  • Jan 2007
                  • 12
                  #5
                  Actually I have tried both 'pointer' and 'hand', both actually worked! I also tried the playing around with size, fontsize, font-size... doesn't seem to work. There has got to be an easier method than to assign an id & use innerHTML, right?

                    Comment

                    • acoder
                      Recognized Expert MVP
                      • Nov 2006
                      • 16032
                      #6
                      Originally posted by Pete90
                      Actually I have tried both 'pointer' and 'hand', both actually worked! I also tried the playing around with size, fontsize, font-size... doesn't seem to work. There has got to be an easier method than to assign an id & use innerHTML, right?
                      You need to use foneSize (notice the case of S), not fontsize. You don''t need to use an id. Just use
                      Code:
                      element.innerHTML = content;
                      There might be another way too, but this is easy.

                      If you need more help, let me know.

                        Comment

                        • Pete90
                          New Member
                          • Jan 2007
                          • 12
                          #7
                          Acoder, thanks... I got it... now it worked. You are correct in saying that it should be fontSize rather than fontsize. Also, simply replacing the function inside with the following resolve the problem:

                          function changeContent(e lement,content) {
                          bannertext.inne rHTML = content;
                          }

                          I find it strange that while other attribute can change its own attribute, but it does not work in the case of the content attribute(i.e. content cannot change content as you mentioned earlier). I am still puzzle as to the reason...

                            Comment

                            Previous template Next
                            Working...