SitePoint Sponsor

User Tag List

Results 1 to 6 of 6

Thread: Help please

  1. #1
    SitePoint Member
    Join Date
    Apr 2011
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Help please

    Hi guys,wats up?
    so i am trying to make this short script that will toggle my text from upper case to lowercase and from lowercase to upper case... so if i wrote HeLlO wOrLd, my script will output hElLo WoRlD. I have gave it many tries but i am just not getting it, can someone who knows what he's doing help me out, thx! Here is a sample of my noob code:

    <html>
    <head>
    <script type="text/javascript">
    function toggle(){

    var theinput=document.getElementById("input");
    if (theinput == toUpperCase()){
    theinput.value.toLowercase();
    }
    else if (theinput == toLowerCase()){
    theinput.value.toUpperCase();
    }

    }
    </script>
    </head>
    <body>
    <input type="checkbox" onClick="toggle()" /> Toggle<br />
    <input type="text" id="input" />
    <!--Oh yeah i forgot to mention that i want my input and output to be in a textbox and the checkbox will change it (no need to toggle back and forth just once is good enough, basic script is all i need)-->
    </body>
    </html>

    Thanks!

  2. #2
    American't awestmoreland's Avatar
    Join Date
    Sep 2002
    Location
    Grand Rapids, MI
    Posts
    1,168
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You're close, but you need to compare the base character with an upper- (or lower-) cased character.
    Code:
    if (character == character.toUpperCase()){
      /* Character is equal to an upper-cased version of itself (already upper case) */
    }
    if (character == character.toLowerCase()){
      /* Character is equal to a lower-cased version of itself (already lower case) */
    }
    You should consider what would happen if the base character is a number or symbol.
    From the English nation to a US location.

  3. #3
    SitePoint Member
    Join Date
    Apr 2011
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hi there,
    i am not sure i understood.. this is the code that i have now, why isn't it working?

    <html>
    <head>
    <script type="text/javascript">
    function togglecase(){
    var theinput=document.getElementById("output").value;
    if (theinput == theinput.toUpperCase()){
    theinput.value.toLowercase();
    }
    else if (theinput == theinput.toLowerCase()){
    theinput.value.toUpperCase();
    }
    }
    </script>
    <body>
    <form>
    <input type="checkbox" onClick="togglecase()"/>Toggle Case<br />
    <input type="text" id="output" />
    </form>
    </body>
    </html>

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,678
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Because you need to loop through each character of the string and process them individually.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Addict bronze trophy AllanP's Avatar
    Join Date
    Sep 2010
    Location
    Australia
    Posts
    298
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Here is a simple toggle script based on your own. The problem with your way of doing it is that you have no control over the case used in typing into the text box. It may be all upper or all lower case, but it is more likely to be a mixture of the two - and maybe even numbers. As Paul says, this type of input requires that you look at each character and change the case accordingly.

    I have "cheated" by providing the text to convert. This allows the script to be very short, but it avoids all of the shortcomings of an open ended application. I have changed the names of a few of your variables to help with interpretation. I also changed the tick box for a button.

    Code :
    <!doctype HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
     
    <html>
     
    <head>
    <title>Toggle Text</title>
    <script type="text/javascript">
    <!--
    function togglecase()
     { var theInputObj=document.getElementById("textIn");
       var txtInput=theInputObj.value;
      // choose the value of the output 
       txtInput=(txtInput==="THESE ARE CAPS")? "these are caps" : "THESE ARE CAPS";
      // output to the textbox
       theInputObj.value=txtInput;
     }
    //-->
    </script>
    </head>
     
    <body>
     
    <form>
      <p><input type="text" id="textIn" size="20" value="THESE ARE CAPS" readonly></p>
      <p><input type="button" onClick="togglecase()" value="ToggleCase"></p>
    </form>
     
    </body>
     
    </html>

  6. #6
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,678
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    But the following just won't do the job

    Code:
    txtInput=(txtInput==="THESE ARE CAPS")? "these are caps" : "THESE ARE CAPS";
    Instead, you need to loop through each character.

    Here's a sample function that does the job:

    Code javascript:
    function invertCase(str) {
        var inverted = '',
            i,
            ch;
        for (i = 0; i < str.length; i += 1) {
            ch = str.charAt(i);
            if (ch === ch.toUpperCase()) {
                ch = ch.toLowerCase();
            } else {
                ch = ch.toUpperCase();
            }
            inverted += ch;
        }
        return inverted;
    }
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


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
  •