We Keep Coding

JavaScript:Choose Colour Randomly for a letter based upon input

I am writing a application which takes user inputs and assigns randomly the colors to each letter in the text.
HTML CODE
<label id="text">
Retrieve data from selected text input among various text inputs with same
name & id upon hitting Enter
</label>
<div>
<input type="text" id="inputColors">
</div>
<input id="Enter" type="button" value="Enter" />
JavaScript
document.getElementById("Enter").onclick = function() {
var colors = document.getElementById('inputColors').value;
var colorslist = colors.split(/[;,]+/);
$('#text').each(function() {
$(this).html($(this).text().split(' ').map(function(v) {
return '<span style="color:' + colorslist[Math.floor(Math.random() *
colorslist.length)] + '">' + v + '</span>';
}).join(' '));
});
}
I am able to color each word but would like it to do it for each letter.I dont want to use css.

Your code currently wraps a span around each word because it splits the string on the space character.
Instead you should split it using .split() which will return an array of all characters (including the spaces).
You then need to join them with nothing too using .join().
document.getElementById("Enter").onclick = function() {
var colors = document.getElementById('inputColors').value;
var colorslist = colors.split(/[;,]+/);
$('#text').each(function() {
$(this).html($(this).text().split('').map(function(v) {
return '<span style="color:' + colorslist[Math.floor(Math.random() *
colorslist.length)] + '">' + v + '</span>';
}).join(''));
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="text">
Retrieve data from selected text input among various text inputs with same name & id upon hitting Enter
</div>
<input type="text" id="inputColors" value="red,yellow,blue,green,orange" />
<input id="Enter" type="button" value="Enter" />

JavaScript/HTML: How to display user input into html body?

heres my html form:
<label>Name:</label><input type ="text" input id="myName" /><br>
<label>Street:</label><input type="text" input id="myStreet" /><br>
<label>City:</label><input type="text" input id="myCity" /><br>
<label>State:</label> <input type="text" input id="myState" /><br>
<label>Zip:</label> <input type="text" input id="myZip" /><br>
<input type="submit" value="Submit" onclick="myAlert()">
</form>
//my myAlertFunc (from external file)
function myAlert(){
var person = new Person(document.getElementById('myName').value, document.getElementById("myStreet").value, document.getElementById("myCity").value, document.getElementById("myState").value, document.getElementById("myZip").value);
alert(person.getFullAddress());
}
//and my getFullAddress proto from my Person class
Person.prototype.getFullAddress = function () {
return ("Hi, my name is" + " " + this.name + "," + " " + "and my address is:" + " " + this.street + "," + this.city + "," + this.state + "," + this.zip);
};
Now, onclick, the myAlertFunc alerts the users input values. How do I display these values in my html body? I know I am supposed to use a element with just an input id and use document.getElementById(); to call that id but i have no idea what to do after that.
Thanks in advance!

The attribute you're looking for is innerHTML: http://www.w3schools.com/jsref/prop_html_innerhtml.asp
So, your code would be something along the lines of:
// alert(person.getFullAddress());
document.getElementById("resultDiv").innerHTML = person.getFullAddress();
Where "resultDiv" is the ID of the element where you want the result to display.
Good luck!

you can set the innerHTML of the element or its value if it's an input

add characters that break html to input

How do I add this to a html text input.
var s = '>>>>>>> """""""""""""';
How can I escape these characters so that it does not break the the HTML
var addMe = '<input type="text" value="' + s + '" />';
This is how it looks when its dynamically added with jquery
<input type="text" ??="" value=""/>

Use .attr('value', ...) to add arbitrary text to an element's value without needing to escape it.

how to delete a value between <input> tags?

I'm creating checkboxes using JQuery as following:
$('<input type="checkbox" ' + 'id=' + (i+1) + '>' + (i+1) + '</input><br/>')
Then later it is removed whenever the user checks the box in:
if (this.checked) {
$(this).remove();
}
However, The input box is deleted, but the number (id) stays on the page, along the <br/> Tag, so I can see the #i there on the HTML Page.
I would like to remove them as well.
So, to in order to make my question as complete as possible, here is how the HTML is laid:
<input id="1" type="checkbox">
1
<br>
Could someone please give me a clue how to remove #i and <br/> from the page?
Thanks

as stated by other answers - input don't have closing tags
You will still need to remove all id and <br />. You can find those with .next() function in jquery. You should put your id in <label> or <span>.
Then. for example:
$(this).next('label').remove();
$(this).next('br').remove();
$(this).remove();
Code can be written shorter but it's for you to see how it works.

The text in <input> text boxes is not set with a textnode (like for textareas), but with the value attribute. (Sorry for the confusion)
Yet, you want to have a checkbox. Best, create a <label> for it, instead of a text node plus a <br /> (which is not handleable with jQuery):
<div class="inputcell">
<input type="checkbox" id="check5">
<label for="check5">5</label>
</div>
With this DOM, you can easily remove the whole box by $("#check5").parent().remove(). Note that single numbers are no valid element ids.

that's because input tags don't have closing tags and remove ignores everything after the >, change this:
$('<input type="checkbox" ' + 'id=' + (i+1) + '>' + (i+1) + '</input><br/>')
to:
$('<input type="checkbox" ' + 'id=' + (i+1) + 'value="' + (i+1) +'"><label>'+ (i+1) +'</label>')
$(this).next('label').andSelf().remove();

input tags don't have closing tag, to create a checkbox you just need the following:
$('<input type="checkbox" ' + 'id=' + (i+1) + '>');
and if you want also to use a label for that checkbox, create appropriate label or any other element, because you can't put closign tag for input and a text between them

simpler way of grouping numerous variables by value of select?

thanks for looking.
im still learning the more complex javascript and jquery coding so could do with some help as i have no idea about the following or even if its possible!
i need a better/simpler/shorter way of doing the following (please note i have removed the irrelevant validation etc coding):
'
function Findbox5( myform, box1, box2, box3, box4, box5, Storeall, s1, s2, s3, s4, s5)
{
//store values
Myform = document.forms.myform;
box1 = Myform.box1.value;
box2 = Myform.box2.value;
box3 = Myform.box3.value;
box4 = Myform.box4.value;
box5 = Myform.box5.value;
s1 = Myform.s1.value;
s2 = Myform.s2.value;
s3 = Myform.s3.value;
s4 = Myform.s4.value;
s5 = Myform.s5.value;
//set as one string
Storeall = s1 + ":" + box1 + ";" + s2 + ":" + box2 + ";" + s3 + ":" + box3 + ";" + s4 + ":" + box4 + ";" + s4 + ":" + box5 + ";" ;
// next function...
} '
as you can see i have 5 input boxes and relevant selects for each box(each select has 4 options:1,2,3,4.). when a user enters data into a box they choose a relevant option. all boxes and options must be entered then they submit the form.
this data will be emailed to me as the variable stored under storeall. which would be something like 1:1234;2:1324;1:3232;4:5434;2:3211;
so what i hope to do is simplify this data into the following with either a seperate function or the same one: 1:1234-3232;2:1324-3211;4:5434;
is this possible? or have i done it the easiest way?
any comments or help welcomed, thanks again

First, you'll want to group these things into a single element that can be iterated against. So if your HTML looks like:
<form>
<input name="s1" />
<input name="box1" />
<input name="s2" />
<input name="box2" />
...
</form>
Then it's probably better to do something like:
<form>
<div class="set">
<input class="s" name="s1" />
<input class="box" name="box1" />
</div>
<div class="set">
<input class="s" name="s2" />
<input class="box" name="box2" />
</div>
...
</form>
Now you've established some commonality among these elements, instead of just different names/IDs. Each set of inputs is grouped by the .set class, and within each set, you know there's going to be two inputs: one with the .s class, and one with the .box class. Now iterating against them with JQuery is easy:
var str = "";
$("form div.set").each(
function(index, element)
{
currentValueS = $(element).find("input.s").val();
currentValueBox = $(element).find("input.box").val();
str += currentValueS + ":" + currentValueBox + ";";
}
);
This uses JQuery's .each() function. .each() allows you to provide a function to perform on each of the elements that JQuery finds from the indicated selector. Here, your selector is form div.set, which means "all div elements that have the class of .set, and are found anywhere under any form element". For each of these elements, you'll need to find the value of the <input> element with the .s class, and also the value of the <input> element with the .box class. Then you just add those to your growing str variable.

If you want everything in the form, you should use serializeArray :
$('#my_form').submit(function() {
var str = '';
$.each($(this).serializeArray(), function () {
str += this.name + ":" + this.value + ";";
});
sendByMail(str);
return false;
});