Web Analytics Made Easy -
StatCounter changing element style with js - CodingForum

Announcement

Collapse
No announcement yet.

changing element style with js

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • changing element style with js

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




    Code:
    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;
    
    }

  • #2
    Code:
    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?
    Digitalocean Cloud Hosting (Referral link - get $10 free credit) Fameco

    Comment


    • #3
      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)
      Code:
      <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>

      Comment


      • #4
        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

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

        Comment

        Working...
        X