Logic help?

This site is best viewed in a modern browser with JavaScript enabled.

Vibos

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

Would I use splits or what?

Really confused atm. My javascript understandings are basic.

JMRKER

Vibos;1248369 wrote:
I'm trying to make a script that when you input text and it has ¹ or ⁴ in front of a word then it assigns anything after that until it sees the next ³ 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

JMRKER;1248455 wrote:
Can you give an example or two of what you expect to input and what you expect as output?

Input: ¹ Hello ⁵ My ² Name ⁶ 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

What does the ³ 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

JMRKER;1248485 wrote:
What does the ³ 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

Vibos;1248493 wrote:
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

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

Seems like a lot of extra duplicated code.
My attempt would be more along these lines (modifying from your attempt).

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