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 14 of 14

Thread: onClick Change

  1. #1
    Regular Coder UrbanTwitch's Avatar
    Join Date
    Apr 2006
    Posts
    485
    Thanks
    44
    Thanked 1 Time in 1 Post

    onClick Change

    Actually you know what I would do to like lets say I put in a color name in an inout box. I click out of it and the following appears like:

    <div style='color:$colorname'>TEST</div>

    You know? When they click out of the box it updates?

    So the text color in the div is the color I put in?
    Formerly MysticScript

    6+ years club

  • #2
    Regular Coder ninnypants's Avatar
    Join Date
    Apr 2008
    Location
    Utah
    Posts
    504
    Thanks
    10
    Thanked 47 Times in 47 Posts
    Same as the last one but the code in the function will be
    Code:
    document.getElementById("MyBox").style.color = color;

  • #3
    Regular Coder UrbanTwitch's Avatar
    Join Date
    Apr 2006
    Posts
    485
    Thanks
    44
    Thanked 1 Time in 1 Post
    oh. that just changes the color. is there another that changes the border of a div?
    Formerly MysticScript

    6+ years club

  • #4
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,919
    Thanks
    6
    Thanked 1,040 Times in 1,013 Posts
    Code:
    document.getElementById("MyBox").style.border = '1px solid green';

  • #5
    Regular Coder ninnypants's Avatar
    Join Date
    Apr 2008
    Location
    Utah
    Posts
    504
    Thanks
    10
    Thanked 47 Times in 47 Posts
    'borderColor' or 'border' I do believe

  • #6
    Regular Coder UrbanTwitch's Avatar
    Join Date
    Apr 2006
    Posts
    485
    Thanks
    44
    Thanked 1 Time in 1 Post
    That looks like a step in the right direction but I want users if they type a color in the input box like #FF99CC then the border changes to that. Can you do that?
    Formerly MysticScript

    6+ years club

  • #7
    Regular Coder ninnypants's Avatar
    Join Date
    Apr 2008
    Location
    Utah
    Posts
    504
    Thanks
    10
    Thanked 47 Times in 47 Posts
    It's just like before you use a function like changeC but use 'border' instead 'backgroundColor' like so:
    Code:
    changeB(color){
         document.getElementById("MyBox").style.border = '1px solid #'+color;
    }
    
    changeB(this.value);

  • #8
    Regular Coder UrbanTwitch's Avatar
    Join Date
    Apr 2006
    Posts
    485
    Thanks
    44
    Thanked 1 Time in 1 Post
    Code:
    <script>
    function changeB(color){
         document.getElementById("MyBox").style.border = '+bwidth'px solid '+color;
    }
    function changeC(color2){
         document.getElementById("MyBox").style.backgroundColor = color2;
    }
    function changeE(bwidth){
         document.getElementById("MyBox").style.borderwidth = bwidth;
    }
    changeB(this.value);
    </script>
    <input type="text" onBlur="changeB(this.value);">
    <input type="text" onBlur="changeC(this.value);">
    <input type="text" onBlur="changeE(this.value);">
    
    <div style='width: 300px; height: 100px;' id='MyBox'></div>
    Can you put two values you typed into one function like borderwidth, bordercolor, and border type? Above script is not working
    Last edited by UrbanTwitch; 08-11-2008 at 08:00 PM.
    Formerly MysticScript

    6+ years club

  • #9
    Regular Coder ninnypants's Avatar
    Join Date
    Apr 2008
    Location
    Utah
    Posts
    504
    Thanks
    10
    Thanked 47 Times in 47 Posts
    This should do it
    Code:
    function changeB(color){
         document.getElementById("MyBox").style.border = wth+'px solid #'+color;
    }
    function changeC(color2){
         document.getElementById("MyBox").style.backgroundColor = color2;
    }
    function changeW(bwidth){
         document.getElementById("MyBox").style.borderWidth = bwidth;
         wth = bwidth;
         return wth;
    }
    changeB(this.value);
    </script>
    <input type="text" onBlur="changeB(this.value);">
    <input type="text" onBlur="changeC(this.value);">
    <input type="text" onBlur="changeW(this.value);">
    Your main problem was your mismatched quotes ('+bwidth'px solid '// incorrect)(bwidth+'px solid #' // correct) also the variables that represent input in a varable (bwidth) cannot be used in other variables so it was changed wth. The reason I didn't use 'width' is because it is an actual property so that would cause problems. Hopefully this helps

  • #10
    Regular Coder UrbanTwitch's Avatar
    Join Date
    Apr 2006
    Posts
    485
    Thanks
    44
    Thanked 1 Time in 1 Post
    Only the middle input box works. IT turns the background color.

    HMm.. a good place to test is: http://htmledit.squarefree.com/
    Formerly MysticScript

    6+ years club

  • #11
    Regular Coder ninnypants's Avatar
    Join Date
    Apr 2008
    Location
    Utah
    Posts
    504
    Thanks
    10
    Thanked 47 Times in 47 Posts
    this should do most of it but I had some trouble with the border color it doesn't work unless you have already declared the width
    Code:
    <script type="text/javascript">
    function changeB(color){
         if(wth){
              //document.getElementById("MyBox").style.border = '1px solid #'+color;
              document.getElementById("MyBox").style.border = wth+'px solid #'+color;
         }else{
              wth = 1;
              //document.getElementById("MyBox").style.border = wth+'px solid #'+color;
              document.getElementById("MyBox").style.border = wth+'px solid #'+color;
         }
    }
    function changeC(color2){
         document.getElementById("MyBox").style.backgroundColor = color2;
    }
    function changeW(bwidth){
         document.getElementById("MyBox").style.borderWidth = bwidth+"px";
         wth = bwidth;
         return wth;
    }
    changeB(this.value);
    </script>
    <input type="text" onBlur="changeB(this.value);">
    <input type="text" onBlur="changeC(this.value);">
    <input type="text" onBlur="changeW(this.value);">
    
    <div style='width: 300px; height: 100px;' id='MyBox'></div>

  • #12
    Regular Coder UrbanTwitch's Avatar
    Join Date
    Apr 2006
    Posts
    485
    Thanks
    44
    Thanked 1 Time in 1 Post
    Code:
    <script type="text/javascript">
    function changeB(color){
    document.getElementById("MyBox").style.border = '1px solid '+color;
    }
       if(wth){
              //document.getElementById("MyBox").style.border = '1px solid '+color;
              document.getElementById("MyBox").style.border = wth+'px solid '+color;
         }else{
              wth = 1;
              //document.getElementById("MyBox").style.border = wth+'px solid '+color;
              document.getElementById("MyBox").style.border = wth+'px solid '+color;
         }
    function changeC(color2){
         document.getElementById("MyBox").style.backgroundColor = color2;
    }
    function changeA(colorx){
         document.getElementById("MyBox").style.color = colorx;
    }
    function changeT(colort){
         document.getElementById("MyBox").style.border = '1px '+ colort +' red';
    }
    function changeW(bwidth){
         document.getElementById("MyBox").style.borderWidth = bwidth+"px";
         wth = bwidth;
         return wth;
    }
    changeB(this.value);
    </script><table><tr><td>Border color</td><td>Background Color</td><td>Border Width</td><td>Text Color</td><td>Border Type</td></tr><tr><td>
    <input type="text" onBlur="changeB(this.value);"></td><td>
    <input type="text" onBlur="changeC(this.value);"></td><td>
    <input type="text" onBlur="changeW(this.value);"></td><td>
    <input type="text" onBlur="changeA(this.value);"></td><td>
    <input type="text" onBlur="changeT(this.value);"></td></tr></table>
    
    <div style='width: 300px; height: 100px;' id='MyBox'>swafvavas</div>
    OK I am almost done with this. So when I type in border type it gets it. but when i go to border color it goes back to 1px solid (color choosen). help anyone?

    this also happens with border width.
    Last edited by UrbanTwitch; 08-12-2008 at 09:35 AM.
    Formerly MysticScript

    6+ years club

  • #13
    Regular Coder Nischumacher's Avatar
    Join Date
    Oct 2005
    Location
    Bombay, India
    Posts
    196
    Thanks
    0
    Thanked 2 Times in 2 Posts
    this should be it...
    Code:
    <script type="text/javascript">
    function changeBgC(color2){
         document.getElementById("MyBox").style.backgroundColor = color2;
    }
    function changeTextC(colorx){
         document.getElementById("MyBox").style.color = colorx;
    }
    function changeBorder(){
        var bColor = document.getElementById("txtBorderColor").value;
        var bWidth = document.getElementById("txtBorderWidth").value;
        var bType = document.getElementById("txtBorderType").value;
        if (bColor=="") bColor = 'black';
        if (bWidth=="") bWidth = '1';
        if (bType=="") bType = 'solid';
        document.getElementById("MyBox").style.border = bWidth + 'px ' + bType + ' ' + bColor;
    }
    </script>
    <table>
        <tr><td>Border color</td>
            <td>Background Color</td>
            <td>Border Width</td>
            <td>Text Color</td>
            <td>Border Type</td></tr>
        <tr><td><input type="text" id="txtBorderColor" onblur="changeBorder();" /></td>
            <td><input type="text" onblur="changeBgC(this.value);" /></td>
            <td><input type="text" id="txtBorderWidth" onblur="changeBorder();" /></td>
            <td><input type="text" onblur="changeTextC(this.value);" /></td>
            <td><input type="text" id="txtBorderType" onblur="changeBorder();" /></td></tr>
    </table>
    <div style='width: 300px; height: 100px;' id='MyBox'>
        swafvavas</div>
    2 changes...
    'id' assigned to 3 textboxes - border color, border width and border type...
    these 3 textboxes now call the same function...
    - NS 666
    .net DEVILoper

  • #14
    Regular Coder UrbanTwitch's Avatar
    Join Date
    Apr 2006
    Posts
    485
    Thanks
    44
    Thanked 1 Time in 1 Post
    THANK YOU. I FINALLY GOT IT.

    You can see it in action: http://sodadome.com/live.html
    Woo. I love everyone one of you guy (Not that way) but for giving me support! :-)

    Many thanks,
    MysticScript
    Last edited by UrbanTwitch; 08-12-2008 at 06:09 PM.
    Formerly MysticScript

    6+ years club


  •  

    Posting Permissions

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