changing element style with js

[pigro]

Good morning,

I'm trying to change the color text of atext[i] value when the "atim[i]+showtime" value is < "now"....

But if i assign the atext[i] value to a new var "ops" and change the color with string ops.style.color = 'red'; the script doesn't work.

Opening the error console of Firefox the error logged is ops.style is undefined....

Someone can help me pls ^^ ???

var atext = new Array();
var atim = new Array()
var otext = "Ragazze Impegnate: \n";
document.getElementById("girlvalue").value = otext;


var showtime = 5500;  // milliseconds 
//var showtime = 600000 // 10 minutes 

window.setInterval("showtext()",1000);  // refresh every 1 second

function showtext() {
var now = new Date().getTime();
var string = otext;

for (var i =0; i <= atext.length; i++) {

if ((atim[i] + showtime) > now) {
string = string + '\n' + atext[i];
// string = string.replace(/\s+/g," ");
}
else if ((atim[i] + showtime) <= now) {
var ops = atext[i];
ops.style.color = 'red';
string = string + '\n ' + ops;
}
document.getElementById("girlvalue").value = string;
}

}

function addItem() {
var b = document.getElementById("girl").value;
atext.push(b);
var now = new Date().getTime();
atim.push(now);
document.getElementById("girl").value = document.getElementById("girl").value;

}

[abduraooft]

function addItem() {
var [ICODE]b[/ICODE] = document.getElementById("girl").[ICODE]value[/ICODE];
atext.[ICODE]push(b)[/ICODE];
var now = new Date().getTime();
atim.push(now);
document.getElementById("girl").value = document.getElementById("girl").value;

}

......
var ops = [ICODE]atext[i][/ICODE];
[ICODE]ops[/ICODE].style.color = 'red';

ops is just a value, you can't apply DOM methods/operations to it.
Where is your call to addItem()? Could you post your relevant html too?

[pigro]

yep! it's really long and there are some errors with display functions (i'm trying to insert a countdown too but if i click 2 or more times the old countprive.value don't stop)

<div style="position:relative; width:550px; display:block; ">
<form name="form1" method="post" action="javascript:insert();">
<div class="form">ragazza: 
	<? catch_girl($query,$girl); ?>
</div>
<div class="form">priv&eacute;: 
	<select class="box" name="prive" id="prive" onFocus="className='focused';" onBlur="className='box';">
    	<option value="0" selected="selected">0</option>
		<option value="1">1</option>
		<option value="2">2</option>
		<option value="3">3</option>
    </select>
</div>  
<div class="form" style="padding-top:10px;"><span class="button"> <input type="submit" name="activity" value="inserisci" /></span></div>
<div style="position:absolute; margin-left:2px; top:1px; right:1px;">
  <textarea style="background-color:#DDDDDD; border:#888888 2px dotted; font-size:1.3em;" wrap="hard" name="girlvalue" readonly="readonly" cols="20" rows="15" id="girlvalue">
  </textarea>
</div>
<div style="clear:both;">
Attualmente nel priv&eacute;:
</div>
<div>
	<input name="viewprive"  style="background-color:#DDDDDD; border:0px; color:#990000; font-size:1.3em;" type="text" id="viewprive" size="15" readonly="readonly" />
</div>
<div><input name="countprive"  style="background-color:#DDDDDD; border:0px; color:#990000; font-size:1.3em;"  type="text" id="countprive" size="15" readonly="readonly" /></div>

</form>
</div>

<script type = "text/javascript">
/// counter

 var milisec=0 
 var milisec1=0
 var milisec2=0
 var seconds=30 
 var seconds1=60
 var seconds2=90
 document.getElementById("countprive").value = ' '; 

function display(){ 
 if (milisec<=0){ 
    milisec=9 
    seconds-=1 
 } 
 if (seconds<=-1){ 
    milisec=0 
    seconds+=1 
 } 
 else 
    milisec-=1 
    document.getElementById("countprive").value=seconds+"."+milisec 
    setTimeout("display()",100) 
} 

function display1(){ 
 if (milisec1<=0){ 
    milisec1=9 
    seconds1-=1 
 } 
 if (seconds1<=-1){ 
    milisec1=0 
    seconds1+=1 
 } 
 else 
    milisec1-=1 
    document.getElementById("countprive").value=seconds1+"."+milisec1 
    setTimeout("display1()",100) 
} 

function display2(){
 if (milisec2<=0){ 
    milisec2=9 
    seconds2-=1 
 } 
 if (seconds2<=-1){ 
    milisec2=0 
    seconds2+=1 
 } 
 else 
    milisec2-=1 
    document.getElementById("countprive").value=seconds2+"."+milisec2 
    setTimeout("display2()",100) 
} 

///
function createObject() {
var request_type;
var browser = navigator.appName;
if(browser == "Microsoft Internet Explorer"){
request_type = new ActiveXObject("Microsoft.XMLHTTP");
}else{
request_type = new XMLHttpRequest();
}
return request_type;
}

var http = createObject();

var nocache = 0;
function insert() {
// Optional: Show a waiting message in the layer with ID login_response
document.getElementById('insert_response').innerHTML = "Just a second..."
// Required: verify that all fields is not empty. Use encodeURI() to solve some issues about character encoding.
var girl= encodeURI(document.getElementById('girl').value);
var prive = encodeURI(document.getElementById('prive').value);
// Set te random number to add to URL request
nocache = Math.random();
// Pass the login variables like URL variable
params='girl='+girl+'&prive=' +prive+'&nocache='+nocache;

http.open('post','query_activity.php',true);
//Send the proper header information along with the request
http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
http.setRequestHeader("Content-length", params.length);
http.setRequestHeader("Connection", "close");

http.onreadystatechange = insertReply;
http.send(params);


if ( prive == 0) {
addItem();
}
else if (prive == 1) {
document.getElementById("countprive").value = ' '; 
document.getElementById("viewprive").value = document.getElementById("girl").value;
display();
}
else if (prive == 2) {
document.getElementById("countprive").value = ' '; 
document.getElementById("viewprive").value = document.getElementById("girl").value;
display1();
}
else if (prive == 3) {
document.getElementById("countprive").value = ' '; 
document.getElementById("viewprive").value = document.getElementById("girl").value;
display2();
}
}

function insertReply() {
if(http.readyState == 4){
var response = http.responseText;

document.getElementById('insert_response').innerHTML = 'Activity inserted:'+response;
}
}

/// inserimento temporizzato


var atext = new Array();
var atim = new Array()
var otext = "Ragazze Impegnate: \n";
document.getElementById("girlvalue").value = otext;


var showtime = 5500;  // milliseconds 
//var showtime = 600000 // 10 minutes 

window.setInterval("showtext()",1000);  // refresh every 1 second

function showtext() {
var now = new Date().getTime();
var string = otext;

for (var i =0; i <= atext.length; i++) {

if ((atim[i] + showtime) > now) {
string = string + '\n' + atext[i];
// string = string.replace(/\s+/g," ");
}
else if ((atim[i] + showtime) <= now) {
var ops = atext[i];
ops.style.color = 'red';
string = string + '\n ' + ops;
}
document.getElementById("girlvalue").value = string;
}

}

function addItem() {
var b = document.getElementById("girl").value;
atext.push(b);
var now = new Date().getTime();
atim.push(now);
document.getElementById("girl").value = document.getElementById("girl").value;

}
</script>

[pigro]

I've resolved the issue by myself.
The textarea single elements (like rows) can't have many styles...
I've converted the textarea to a simple div. The code is long but can be interest

check it

<div style="position:relative; width:550px; display:block; ">
<form name="form1" method="post" action="javascript:insert();">
<div class="form">ragazza: 
	<? catch_girl($query,$girl); ?>
</div>
<div class="form">priv&eacute;: 
	<select class="box" name="prive" id="prive" onFocus="className='focused';" onBlur="className='box';">
    	<option value="0" selected="selected">0</option>
		<option value="1">1</option>
		<option value="2">2</option>
		<option value="3">3</option>
    </select>
</div>  
<div class="form" style="padding-top:10px;"><span class="button"> <input type="submit" name="activity" value="inserisci" /></span></div>
  <div style=" position:absolute; margin-left:2px; top:1px; height:250px; width:200px; right:1px; background-color:#DDD; border:1px dashed #333; font-size:1.3em;" name="girlvalue" readonly="readonly" cols="20" rows="15" id="girlvalue">
</div>
</form>
</div>
<script type = "text/javascript">
 function createObject() {
var request_type;
var browser = navigator.appName;
if(browser == "Microsoft Internet Explorer"){
request_type = new ActiveXObject("Microsoft.XMLHTTP");
}else{
request_type = new XMLHttpRequest();
}
return request_type;
}

var http = createObject();

var nocache = 0;
function insert() {
// Optional: Show a waiting message in the layer with ID login_response
document.getElementById('insert_response').innerHTML = "Just a second..."
// Required: verify that all fields is not empty. Use encodeURI() to solve some issues about character encoding.
var girl= encodeURI(document.getElementById('girl').value);
var prive = encodeURI(document.getElementById('prive').value);
// Set te random number to add to URL request
nocache = Math.random();
// Pass the login variables like URL variable
params='girl='+girl+'&prive=' +prive+'&nocache='+nocache;

http.open('post','query_activity.php',true);
//Send the proper header information along with the request
http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
http.setRequestHeader("Content-length", params.length);
http.setRequestHeader("Connection", "close");

http.onreadystatechange = insertReply;
http.send(params);
if (prive == 0) {
addItem();
}
}

function insertReply() {
if(http.readyState == 4){
var response = http.responseText;

document.getElementById('insert_response').innerHTML = 'Activity inserted:'+response;
}
}




var atext = new Array();
var atim = new Array()
var otext = "Ragazze Impegnate:";
document.getElementById("girlvalue").innerHTML = otext;


//var showtime = 300000;  // milliseconds = 5 minutes
var showtime = 20000 // time for girl activity
var timeplus = 30000 // time delay

window.setInterval("showtext()",1000);  // refresh every 1 second

function showtext() {
var now = new Date().getTime();
var string = otext;
for (var i =0; i <= atext.length; i++) {
if ((atim[i] + showtime) > now) {
string = string + "<br>" + atext[i];
//string = string.replace(/\s+/g," ");
} else if (((atim[i] + showtime) <= now) && ((atim[i] + timeplus) > now )) {
string = string + "<br><span style='color:red; font-size:1.5em;'>" + atext[i] +"</span>";
}

document.getElementById("girlvalue").innerHTML = string;
}
}

function addItem() {
var b = document.getElementById("girl").value;
atext.push(b);
var now = new Date().getTime();
atim.push(now);
document.getElementById("girl").value = document.getElementById("girl").value;

}

</script>