...

View Full Version : onClick Change



UrbanTwitch
08-11-2008, 04:23 PM
Actually you know what I would do to like lets say I put in a color name in an inout box. I click out of it and the following appears like:

<div style='color:$colorname'>TEST</div>

You know? When they click out of the box it updates?

So the text color in the div is the color I put in?

ninnypants
08-11-2008, 04:32 PM
Same as the last one but the code in the function will be

document.getElementById("MyBox").style.color = color;

UrbanTwitch
08-11-2008, 04:42 PM
oh. that just changes the color. is there another that changes the border of a div?

VIPStephan
08-11-2008, 04:47 PM
document.getElementById("MyBox").style.border = '1px solid green';

ninnypants
08-11-2008, 04:51 PM
'borderColor' or 'border' I do believe

UrbanTwitch
08-11-2008, 07:26 PM
That looks like a step in the right direction but I want users if they type a color in the input box like #FF99CC then the border changes to that. Can you do that?

ninnypants
08-11-2008, 07:31 PM
It's just like before you use a function like changeC but use 'border' instead 'backgroundColor' like so:


changeB(color){
document.getElementById("MyBox").style.border = '1px solid #'+color;
}

changeB(this.value);

UrbanTwitch
08-11-2008, 07:51 PM
<script>
function changeB(color){
document.getElementById("MyBox").style.border = '+bwidth'px solid '+color;
}
function changeC(color2){
document.getElementById("MyBox").style.backgroundColor = color2;
}
function changeE(bwidth){
document.getElementById("MyBox").style.borderwidth = bwidth;
}
changeB(this.value);
</script>
<input type="text" onBlur="changeB(this.value);">
<input type="text" onBlur="changeC(this.value);">
<input type="text" onBlur="changeE(this.value);">

<div style='width: 300px; height: 100px;' id='MyBox'></div>

Can you put two values you typed into one function like borderwidth, bordercolor, and border type? Above script is not working :(

ninnypants
08-12-2008, 03:17 AM
This should do it

function changeB(color){
document.getElementById("MyBox").style.border = wth+'px solid #'+color;
}
function changeC(color2){
document.getElementById("MyBox").style.backgroundColor = color2;
}
function changeW(bwidth){
document.getElementById("MyBox").style.borderWidth = bwidth;
wth = bwidth;
return wth;
}
changeB(this.value);
</script>
<input type="text" onBlur="changeB(this.value);">
<input type="text" onBlur="changeC(this.value);">
<input type="text" onBlur="changeW(this.value);">

Your main problem was your mismatched quotes ('+bwidth'px solid '// incorrect)(bwidth+'px solid #' // correct) also the variables that represent input in a varable (bwidth) cannot be used in other variables so it was changed wth. The reason I didn't use 'width' is because it is an actual property so that would cause problems. Hopefully this helps

UrbanTwitch
08-12-2008, 03:28 AM
Only the middle input box works. IT turns the background color.

HMm.. a good place to test is: http://htmledit.squarefree.com/

ninnypants
08-12-2008, 05:52 AM
this should do most of it but I had some trouble with the border color it doesn't work unless you have already declared the width


<script type="text/javascript">
function changeB(color){
if(wth){
//document.getElementById("MyBox").style.border = '1px solid #'+color;
document.getElementById("MyBox").style.border = wth+'px solid #'+color;
}else{
wth = 1;
//document.getElementById("MyBox").style.border = wth+'px solid #'+color;
document.getElementById("MyBox").style.border = wth+'px solid #'+color;
}
}
function changeC(color2){
document.getElementById("MyBox").style.backgroundColor = color2;
}
function changeW(bwidth){
document.getElementById("MyBox").style.borderWidth = bwidth+"px";
wth = bwidth;
return wth;
}
changeB(this.value);
</script>
<input type="text" onBlur="changeB(this.value);">
<input type="text" onBlur="changeC(this.value);">
<input type="text" onBlur="changeW(this.value);">

<div style='width: 300px; height: 100px;' id='MyBox'></div>

UrbanTwitch
08-12-2008, 08:23 AM
<script type="text/javascript">
function changeB(color){
document.getElementById("MyBox").style.border = '1px solid '+color;
}
if(wth){
//document.getElementById("MyBox").style.border = '1px solid '+color;
document.getElementById("MyBox").style.border = wth+'px solid '+color;
}else{
wth = 1;
//document.getElementById("MyBox").style.border = wth+'px solid '+color;
document.getElementById("MyBox").style.border = wth+'px solid '+color;
}
function changeC(color2){
document.getElementById("MyBox").style.backgroundColor = color2;
}
function changeA(colorx){
document.getElementById("MyBox").style.color = colorx;
}
function changeT(colort){
document.getElementById("MyBox").style.border = '1px '+ colort +' red';
}
function changeW(bwidth){
document.getElementById("MyBox").style.borderWidth = bwidth+"px";
wth = bwidth;
return wth;
}
changeB(this.value);
</script><table><tr><td>Border color</td><td>Background Color</td><td>Border Width</td><td>Text Color</td><td>Border Type</td></tr><tr><td>
<input type="text" onBlur="changeB(this.value);"></td><td>
<input type="text" onBlur="changeC(this.value);"></td><td>
<input type="text" onBlur="changeW(this.value);"></td><td>
<input type="text" onBlur="changeA(this.value);"></td><td>
<input type="text" onBlur="changeT(this.value);"></td></tr></table>

<div style='width: 300px; height: 100px;' id='MyBox'>swafvavas</div>


OK I am almost done with this. So when I type in border type it gets it. but when i go to border color it goes back to 1px solid (color choosen). help anyone?

this also happens with border width. :(

Nischumacher
08-12-2008, 12:04 PM
this should be it...

<script type="text/javascript">
function changeBgC(color2){
document.getElementById("MyBox").style.backgroundColor = color2;
}
function changeTextC(colorx){
document.getElementById("MyBox").style.color = colorx;
}
function changeBorder(){
var bColor = document.getElementById("txtBorderColor").value;
var bWidth = document.getElementById("txtBorderWidth").value;
var bType = document.getElementById("txtBorderType").value;
if (bColor=="") bColor = 'black';
if (bWidth=="") bWidth = '1';
if (bType=="") bType = 'solid';
document.getElementById("MyBox").style.border = bWidth + 'px ' + bType + ' ' + bColor;
}
</script>
<table>
<tr><td>Border color</td>
<td>Background Color</td>
<td>Border Width</td>
<td>Text Color</td>
<td>Border Type</td></tr>
<tr><td><input type="text" id="txtBorderColor" onblur="changeBorder();" /></td>
<td><input type="text" onblur="changeBgC(this.value);" /></td>
<td><input type="text" id="txtBorderWidth" onblur="changeBorder();" /></td>
<td><input type="text" onblur="changeTextC(this.value);" /></td>
<td><input type="text" id="txtBorderType" onblur="changeBorder();" /></td></tr>
</table>
<div style='width: 300px; height: 100px;' id='MyBox'>
swafvavas</div>
2 changes...
'id' assigned to 3 textboxes - border color, border width and border type...
these 3 textboxes now call the same function...

UrbanTwitch
08-12-2008, 05:28 PM
THANK YOU. I FINALLY GOT IT.

You can see it in action: http://sodadome.com/live.html
Woo. I love everyone one of you guy (Not that way) but for giving me support! :-)

Many thanks,
MysticScript



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum