www.webdeveloper.com
Results 1 to 8 of 8

Thread: Logic help?

  1. #1
    Join Date
    Jan 2013
    Posts
    8

    Logic help?

    I'm trying to make a script that when you input text and it has ^1 or ^4 in front of a word then it assigns anything after that until it sees the next ^3 to the proper innerHTML field..

    Would I use splits or what?

    Really confused atm. My javascript understandings are basic.

  2. #2
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,354
    Quote Originally Posted by Vibos View Post
    I'm trying to make a script that when you input text and it has ^1 or ^4 in front of a word then it assigns anything after that until it sees the next ^3 to the proper innerHTML field..

    Would I use splits or what?

    Really confused atm. My javascript understandings are basic.
    Can you give an example or two of what you expect to input and what you expect as output?

  3. #3
    Join Date
    Jan 2013
    Posts
    8
    Quote Originally Posted by JMRKER View Post
    Can you give an example or two of what you expect to input and what you expect as output?
    Input: ^1 Hello ^5 My ^2 Name ^6 is Vibos.
    0-9 are colors
    0 - Black
    1 - Red
    2 - Green
    3 - Yellow
    4 - Blue
    5 - Cyan
    6 - Pink
    7 - White
    8 - Grey
    9 - Light Grey

    Output

    Hello My Name is Vibos.

    I don't need the code, just give me the logic on what I need to use to do this.

    Thanks!
    Last edited by Vibos; 02-03-2013 at 12:59 PM.

  4. #4
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,354
    What does the ^3 have to do with this and your original request?

    My logic would be to split on the ^ characters
    And get the first char of each element to determine the color scheme
    Then add an appropriate style tag to specify the color chosen.

    Use an array to select the color chosen.
    Last edited by JMRKER; 02-03-2013 at 03:29 PM.

  5. #5
    Join Date
    Jan 2013
    Posts
    8
    Quote Originally Posted by JMRKER View Post
    What does the ^3 have to do with this and your original request?

    My logic would be to split on the ^ characters
    And get the first char of each element to determine the color scheme
    Then add an appropriate style tag to specify the color chosen.

    Use an array to select the color chosen.
    Thanks I got this, but it's not working properly.

    -snip-

    Got it working.. Forgot to do .value.

    Thank you!
    Last edited by Vibos; 02-03-2013 at 04:51 PM.

  6. #6
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,354
    Quote Originally Posted by Vibos View Post
    Thanks I got this, but it's not working properly.

    -snip-

    Got it working.. Forgot to do .value.

    Thank you!
    Why not post your solution for other beginners?

  7. #7
    Join Date
    Jan 2013
    Posts
    8
    Here is how it looks:
    http://pastehtml.com/view/crbbd6ydt.html
    (Needs chrome, safari or steam's browser since it uses webkit for text outline)

    Here is the source:

    http://pastebin.com/raw.php?i=PJaLdTp4

    Really sloppy HTML and I'm using obsolete elements.

    Sorry for that.
    Last edited by Vibos; 02-04-2013 at 06:40 PM.

  8. #8
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,354

    Lightbulb

    Seems like a lot of extra duplicated code.
    My attempt would be more along these lines (modifying from your attempt).
    Code:
    <html>
    <head>
        <style>
            .style {
                position: absolute;
                height: 300px;
                width: 250px;
                margin: -100px 0 0 -200px;
                top: 50%;
                left: 50%;
                padding: 50px;
                box-shadow: 2px 2px 10px 5px #888888;
                font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
            }
            body { background-color: #F8F8F8; }
            .result { -webkit-text-stroke: .50px black; }
            h3 { font-size: 30px;  font-family:Arial,Helvetica,sans-serif;; }
        </style>
    </head>
    
    <body onload="changeColor()">
    <div class="style">
        Text: <button onclick="document.getElementById('inputtext').value='';changeColor()">Clear</button>
        <br><input id="inputtext" type="text" onkeyup="changeColor()" size="40" value="" ><br/>
        0 - Black<br/>    1 - Red<br/>    2 - Green<br/>    3 - Yellow<br/>
        4 - Blue<br/>     5 - Cyan<br/>   6 - Pink<br/>     7 - White<br/>
        8 - Grey<br/>     9 - Light Grey<br/>
    <p>
    <button onclick="document.getElementById('inputtext').value=testNumbers;changeColor()">Test Numbers</button>
    <button onclick="document.getElementById('inputtext').value=testWords;changeColor()">Test Words</button>
    </div>
    
    <h3 id="result" class="result">Result will be outputted here.</h3>
    <p style=" position: absolute; bottom: 0; left: 0; width: 30%; text-align: center;">Recommended browsers: Google Chrome, Steam Browser</p>
    <script>
    
    var colours = ['#060b07','#ff0101','#1bef1e','#f2f84c','#1f2bf3','#38c4e5','#f20dff','white','#9a9c99','#d4d3cf','black'];
    var testNumbers = "^0 0 ^1 1 ^2 2 ^3 3 ^4 4 ^5 5 ^6 6 ^7 7 ^8 8 ^9 9";
    var testWords = "^0 Black ^1 Red ^2 Green ^3 Yellow ^4 Blue ^5 Cyan ^6 Pink ^7 White ^8 Grey ^9 Light Grey";
    
    function alterColor(info) {
      var c = info.charAt(0);  // if (c == ' ') { return; }
      if (( c>='0') && (c<='9')) { c = parseInt(c); } else { c = colours.length-1; }
      return '<font color="'+colours[c]+'">'+info.substring(1)+'</font>';
    }
    function changeColor(){
      document.getElementById("result").innerHTML = "";
      var s = document.getElementById("inputtext").value.split('^');  s.shift();
      for (var i=0; i < s.length; i++) { document.getElementById('result').innerHTML += alterColor(s[i])+' '; }
    }
    window.onload = function() { document.getElementById('inputtext').value = testNumbers; changeColor(); }
    
    </script>
    
    </body>
    </html>

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles