Logic help?

**Vibos** · 02-02-2013, 10:13 PM

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.

**JMRKER** · 02-03-2013, 11:39 AM

Originally Posted by Vibos

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?

**Vibos** · 02-03-2013, 12:55 PM

Originally Posted by JMRKER

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!

**JMRKER** · 02-03-2013, 03:16 PM

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.

**Vibos** · 02-03-2013, 04:27 PM

Originally Posted by JMRKER

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!

**JMRKER** · 02-03-2013, 08:19 PM

Originally Posted by Vibos

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?

**Vibos** · 02-04-2013, 06:35 PM

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.

**JMRKER** · 02-04-2013, 10:54 PM

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: Logic help?

Thread Tools

Display

Logic help?

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions