Javascript Function Question

[N1CK3RS0N]

Hello,

 

I'm working on my first JavaScript project at the moment. I'm working on making a WYSIWYG text-editor. At the moment I'm trying to figure out how to get my text color changer to work.

 

Heres the demo.

 

http://www.cigarcompendium.com/WYSIWYG/index.html

 

What I am trying to do is have them click the button for either text color or background color, and then it opens up the color window. That part works. What I'm having trouble is passing a variable into the second function which controls what color they select and applies the changes to the text.

 

Basically I want the first function to tell the color window to appear and tell the second function which color they want to change, foreground or background color.

 

You can view the HTML and JS on that demo.

 

Thanks

 

 

[N1CK3RS0N]

I tried doing something like this, but had no luck...

 

function colorlist(a) {
var colortype = a;
document.getElementById('colorlist').style.visibility="visible";
document.getElementById('editor').contentWindow.focus();
coloroption(colortype);
}

function coloroption(colortype) {
if (colortype == "forecolor") {
	function color(color) {
		document.getElementById('editor').contentWindow.document.execCommand("forecolor", false, color);
		document.getElementById('colorpalette').style.visibility="hidden";
		document.getElementById('editor').contentWindow.focus();
	}
} else if (colortype =="hilitecolor") {
	function color(color) {
		document.getElementById('editor').contentWindow.document.execCommand("hilitecolor", false, color);
		document.getElementById('colorpalette').style.visibility="hidden";
		document.getElementById('editor').contentWindow.focus();
	}
}
}

[Psycho]

I'm not going to read through your code to give specific assistance, but it seems pretty simple to me.

 

You have two button, one to change the text and one to change the background. You want each button to bring up the same colorpicker. But, when the user selects a color you want it to "know" which element to change, correct?

 

Here are two possible solutions off the top of my head:

 

1. Create a global variable to determine what the color will update. Then when the user chooses the button to change text color or background color, the buttons will call the function to display the color picker AND will pass a value to the function ('text' or 'background'). When the funtion to display the color picker runs it will take that passed value and set the global variable. Then when the user selects a color from the picker it will call another function (e.g. changeColor(colorID)) and pass the colorID to be set. That function will check the global variable and call the appropriate function (changeTextColor(colorID) or changeBackgroundColor(colorID))

 

2. The other option is to have two color pickers. I am assuming the color picker is always there and you are just displaying/hiding it as needed. So, you could have two color pickers - one for the text and one for the background. The buttons could call the appropriate color picker and the picker will make the call the the appropriate function to change the text ot background color.

[N1CK3RS0N]

I'm not going to read through your code to give specific assistance, but it seems pretty simple to me.

 

You have two button, one to change the text and one to change the background. You want each button to bring up the same colorpicker. But, when the user selects a color you want it to "know" which element to change, correct?

 

Here are two possible solutions off the top of my head:

 

1. Create a global variable to determine what the color will update. Then when the user chooses the button to change text color or background color, the buttons will call the function to display the color picker AND will pass a value to the function ('text' or 'background'). When the funtion to display the color picker runs it will take that passed value and set the global variable. Then when the user selects a color from the picker it will call another function (e.g. changeColor(colorID)) and pass the colorID to be set. That function will check the global variable and call the appropriate function (changeTextColor(colorID) or changeBackgroundColor(colorID))

 

2. The other option is to have two color pickers. I am assuming the color picker is always there and you are just displaying/hiding it as needed. So, you could have two color pickers - one for the text and one for the background. The buttons could call the appropriate color picker and the picker will make the call the the appropriate function to change the text ot background color.

 

Thanks. I'm kinda confused a bit. Sorta understand what you mean but kinda confused. I've been doing JavaScript for like a week now. Just sort of editing different things from different guides and trying to optimize it for minimal coding.

 

Is it to much to ask for you to show me what you mean by showing me the coding? Doesn't seem all that complex, I'm just not fully clear on what you mean and how I should do it. I'm more of a visual learner

 

It does kind of sound like what I'm trying to do in my 2nd post. The problem is the HTML already uses a variable in the function for the color selection. I didn't know how to use a variable from the HTML and from the JS in 1 function.

 

Thanks for the help though, appreciate it.

[Psycho]

The problem is the HTML already uses a variable in the function for the color selection.

 

Huh? HTML does not use variables. HTML is just a markup language.

 

Here is a very rudimentary example of option 1

<html>
<head>
<script type="text/javascript">

//Create global var
var colorSelection;

function selectColor(selection)
{
    //Set global var value
    colorSelection = selection;
    //open the color picker
    document.getElementById('colorSelector').style.visibility = 'visible';
    return;
}

function changeColor(colorCode)
{
    //Set color of text or background based on global var
    document.getElementById('input').style[colorSelection] = colorCode;

    //Hide the color selector
    document.getElementById('colorSelector').style.visibility = 'hidden';
    return;
}
</script>
</head>
<body>
<span id="input">Here is the text to be modified</span>
<br /><br />
<button onclick="selectColor('color');">Change Text Color</button>
<button onclick="selectColor('backgroundColor');">Change Background Color</button>
<br /><br />
<div id="colorSelector" style="visibility:hidden;">
<table>
  <tr>
    <td onclick="changeColor('#ff0000');" style="background-color:#ff0000;">&nbsp&nbsp&nbsp</td>
    <td onclick="changeColor('#00ff00');" style="background-color:#00ff00;">&nbsp&nbsp&nbsp</td>
    <td onclick="changeColor('#0000ff');" style="background-color:#0000ff;">&nbsp&nbsp&nbsp</td>
  </tr>
</table>
</div>

</body>
</html>

[N1CK3RS0N]

The problem is the HTML already uses a variable in the function for the color selection.

 

Huh? HTML does not use variables. HTML is just a markup language.

 

Here is a very rudimentary example of option 1

 

Epic. Thank you man. I owe ya one

 

All thats left now is to get the div to position itself based on which was clicked. And WYSIWYG editor pretty much done for the JS part.

 

BTW, should i always add that return; to the end of my functions?