Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New Coder
    Join Date
    Sep 2012
    Posts
    79
    Thanks
    2
    Thanked 1 Time in 1 Post

    another criterion to the choice of affected text field

    Code:
    <form>
    <input></form>
    <FORM name="orthisone-probablynot">
    <input type="TEXT" name="naam" size="20" value=""
    id="thisone" style="background-color:0000ff">
                     
          
                <center>
                </center>
              </form>
              
    
    </center>
    
    <script language="javascript">
    var bkColor = "red";
    function getEvent(e){
      if(window.event != null) {
        return event;
      }
      return e;
    }
    function setBKColor(e){
     e = getEvent(e);
     var src =  e.srcElement || e.target;
     window.status="t";
     if(src != null) {
       src.style.bkColor = src.style.backgroundColor;
       src.style.backgroundColor = bkColor;
     }
    }
    function reSetBKColor(e){
     e = getEvent(e);
     var src =  e.srcElement || e.target;
     if(src != null) {
       src.style.backgroundColor = src.style.bkColor;
     }
    }
    function attachEvent(name,element,callBack) {
        if (element.addEventListener) {
          element.addEventListener(name, callBack,false);
        } else if (element.attachEvent) {
          element.attachEvent('on' + name, callBack);
        }
      }
    
    function setListner(eve,func) {
       var ele = document.forms[0].elements;
       for(var i = 0; i <ele.length;i++) {
        element = ele[i];
        if (element.type) {
          switch (element.type) { case 'text':
    
               attachEvent(eve,element,func);
           }
         }
      }
    }
    setListner("focus",setBKColor);
    setListner("blur",reSetBKColor);
    </script>
    This piece of code changes the bg color of the first text field on the page.

    How to add another criterion - that if input field's ID, so that it would be possible to click red the second field on the page IDd as "thisone"?
    Last edited by eydg; 11-29-2012 at 03:56 PM. Reason: corrected the last line

  • #2
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,398
    Thanks
    12
    Thanked 570 Times in 563 Posts
    I don't get it ... your last line of text should be rewritten because it's hard (impossible?) to understand.

  • #3
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,310
    Thanks
    203
    Thanked 2,563 Times in 2,541 Posts
    I know that inline code is disapproved of, but the requirement (as I understand it) is so simple that I am tempted. Event listeners are perhaps overkill here.

    Code:
    <input type="TEXT" name="naam" id="thisone" size="20" value=""  style="background-color:0000FF" onfocus = "this.style.backgroundColor = 'FF0000' " onblur = "this.style.backgroundColor = '0000FF' "  >
    <br>
    <input type="TEXT" name="naam2" id="thisone2" size="20" value=""  style="background-color:0000FF" onfocus = "this.style.backgroundColor = 'FF0000' " onblur = "this.style.backgroundColor = '0000FF' " >
    <br>
    <input type="TEXT" name="naam3" id="thisone3" size="20" value=""  style="background-color:0000FF" onfocus = "this.style.backgroundColor = 'FF0000' " onblur = "this.style.backgroundColor = '0000FF' " >
    Be aware that <script language = "Javascript"> and the <center> tags are obsolete and deprecated. So are form names - the form should be assigned an id instead.

    Also be aware that each id must be unique - you cannot have two elements with the same id.


    All advice is supplied packaged by intellectual weight, and not by volume. Contents may settle slightly in transit.
    Last edited by Philip M; 11-29-2012 at 08:47 AM.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #4
    New Coder
    Join Date
    Sep 2012
    Posts
    79
    Thanks
    2
    Thanked 1 Time in 1 Post
    Thanks. I have modified js accordingly to your changes in html, to the code looks like this:
    Code:
    <!--not working in internet explorer-->
    
    
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    </head>
    
    <body><form><input></form>
    <input type="TEXT" name="naam" id="thisone" size="20" value=""  style="background-color:0000FF" onfocus = "this.style.backgroundColor = 'FF0000' " onblur = "this.style.backgroundColor = '0000FF' "  >
    <br>
    <input type="TEXT" name="naam2" id="thisone2" size="20" value=""  style="background-color:0000FF" onfocus = "this.style.backgroundColor = 'FF0000' " onblur = "this.style.backgroundColor = '0000FF' " >
    <br>
    <input type="TEXT" name="naam3" id="thisone3" size="20" value=""  style="background-color:0000FF" onfocus = "this.style.backgroundColor = 'FF0000' " onblur = "this.style.backgroundColor = '0000FF' "  />
              
    
    </center>
    
    <script language="javascript">
    var bkColor = "red";
    function getEvent(e){
      if(window.event != null) {
        return event;
      }
      return e;
    }
    function setBKColor(e){
     e = getEvent(e);
     var src =  e.srcElement || e.target;
     window.status="t";
     if(src != null) {
       src.style.bkColor = src.style.backgroundColor;
       src.style.backgroundColor = bkColor;
     }
    }
    function reSetBKColor(e){
     e = getEvent(e);
     var src =  e.srcElement || e.target;
     if(src != null) {
       src.style.backgroundColor = src.style.bkColor;
     }
    }
    function attachEvent(name,element,callBack) {
        if (element.addEventListener) {
          element.addEventListener(name, callBack,false);
        } else if (element.attachEvent) {
          element.attachEvent('on' + name, callBack);
        }
      }
    
    function setListner(eve,func) {
       var ele = document.getElementById("thisone2");
    
        element = ele;
    
    
               attachEvent(eve,element,func);
           }
    
    
    setListner("focus",setBKColor);
    setListner("blur",reSetBKColor);
    </script>
    </body>
    </html>
    And it does work as expected - to put it to test, I added a form above, to see if it does not mess up the identification if the thisone2 field. All is well now, except for internet explorer.

    In ie
    1) thisone2 field - the one that is affected does not change its color upon focus somewhere else. It remains red.
    2) all the 3 fields do get affected by clicking, while only the middle one should.

    Have I messed something now?

    PS. Thank you for these general informations on JS, too. I am forgetting.
    Last edited by eydg; 11-29-2012 at 04:04 PM.

  • #5
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,310
    Thanks
    203
    Thanked 2,563 Times in 2,541 Posts
    Why not just use the code I gave you? You do not need any additional scripts.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #6
    New Coder
    Join Date
    Sep 2012
    Posts
    79
    Thanks
    2
    Thanked 1 Time in 1 Post
    Ah yes.

    That's a very neat solution. However, it does not work if the code starts with:

    Code:
    <!doctype html>

    So a typical html5 header makes it not work.

    Is that solution you proposed getting obsolete?

  • #7
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,310
    Thanks
    203
    Thanked 2,563 Times in 2,541 Posts
    Quote Originally Posted by eydg View Post
    Ah yes.

    That's a very neat solution. However, it does not work if the code starts with:

    Code:
    <!doctype html>

    So a typical html5 header makes it not work.

    Is that solution you proposed getting obsolete?
    The HTML5 spec removes attributes and tags that control the look or style of any element, and is no longer tolerant of inline styling.

    Try this instead:-

    Code:
    <!DOCTYPE html>
    <head>
    
    <style type = "text/css">
    .stylex {background-color:#0000FF}
    .styley {background-color:#FF0000}
    </style>
    </head>
    <body>
    
    <input type="text" name="naam" id="thisone" class = "stylex" size="20" value="" onfocus= "this.className = 'styley' "  onblur = "this.className = 'stylex' ">
    <br>
    <input type="text" name="naam2" id="thisone2" class = "stylex" size="20" value="" onfocus= "this.className = 'styley' "  onblur = "this.className = 'stylex' ">
    <br>
    <input type="text" name="naam3" id="thisone3" class = "stylex" size="20" value="" onfocus= "this.className = 'styley' "  onblur = "this.className = 'stylex' ">
    <br>
    
    </body>
    
    </html>
    Last edited by Philip M; 11-29-2012 at 08:00 PM.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #8
    New Coder
    Join Date
    Sep 2012
    Posts
    79
    Thanks
    2
    Thanked 1 Time in 1 Post
    Thank you very much. Now it works under all conditions.


  •  

    Posting Permissions

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