www.webdeveloper.com
Results 1 to 7 of 7

Thread: Highlighting Javascript Problem

  1. #1
    Join Date
    Mar 2014
    Posts
    47

    Highlighting Javascript Problem

    I am trying to highlight certain bits of my javascript code. I have HTML which contains the text boxes, the code below basically calculates totals of information and outputs them.

    I want to highlight the boxes when they are above a certain number.

    FTw should highlight at 17 and above
    FBw should highlight at 13 and above
    FTp should highlight at 14 and above
    FBp should highlight at 14 and above
    FTt should highlight at 10 and above
    FBt should highlight at 13 and above

    Here is the code so far:

    Code:
       }
       total();
    }
    
    /* Totals */
    
    function total(){
     var t11 = document.getElementsByClassName("FTw1"),
         t12 = document.getElementsByClassName("FBw1"),
         t13 = document.getElementsByClassName("FTp1"),
         t14 = document.getElementsByClassName("FBp1"),
         t15 = document.getElementsByClassName("FTt1"),
         t16 = document.getElementsByClassName("FBt1"),
         t21 = document.getElementsByClassName("FTw2"),
         t22 = document.getElementsByClassName("FBw2"),
         t23 = document.getElementsByClassName("FTp2"),
         t24 = document.getElementsByClassName("FBp2"),
         t25 = document.getElementsByClassName("FTt2"),
         t26 = document.getElementsByClassName("FBt1"),
         tperc = document.getElementsByClassName("perc"),
         t1 = document.getElementById("FTw1").value,
         t2 = document.getElementById("FBw1").value,
         t3 = document.getElementById("FTp1").value,
         t4 = document.getElementById("FBp1").value,
         t5 = document.getElementById("FTt1").value,
         t6 = document.getElementById("FBt1").value,
         tt1 = document.getElementById("FTw2").value,
         tt2 = document.getElementById("FBw2").value,
         tt3 = document.getElementById("FTp2").value,
         tt4 = document.getElementById("FBp2").value,
         tt5 = document.getElementById("FTt2").value,
         tt6 = document.getElementById("FBt2").value,
         ttperc = document.getElementById("perc").value,
         s11 = "FTw1",
         s12 = "FBw1",
         s13 = "FTp1",
         s14 = "FBp1",
         s15 = "FTt1";
         s16 = "FBt1";
         s21 = "FTw2",
         s22 = "FBw2",
         s23 = "FTp2",
         s24 = "FBp2",
         s25 = "FTt2";
         s26 = "FBt2";
         sperc = "perc";
     sum(t11,t1,s11);
     sum(t12,t2,s12);
     sum(t13,t3,s13);
     sum(t14,t4,s14);
     sum(t15,t5,s15);
     sum(t16,t6,s16);
     sum(t21,tt1,s21);
     sum(t22,tt2,s22);
     sum(t23,tt3,s23);
     sum(t24,tt4,s24);
     sum(t25,tt5,s25);
     sum(t26,tt6,s26);
     sum(tperc,ttperc,sperc);
     
      if (document.getElementById("perc").value >= '66') {
         document.getElementById("perc").className = 'highlight';
     }else{
         document.getElementById("perc").className = ''; 
     }
     }
    
    function sum(c,t,s){
     t = '0';
     for(var i = 0; i < c.length; i++){
      var a = c[i].value,
          b = 1*a+1*t;
      t = b;
      document.getElementById(s).value = t;
     }
    }
    Hope somebody can help with this, also I have already added to the HTML file the following line in the <head> area:

    <style>
    .highlight{
    background-color:green;
    }
    </style>

  2. #2
    Join Date
    Mar 2014
    Posts
    47
    Ask if there is anything else that I need to provide. I dont know much about javascript but cant figure this out, I have tried copying and pasting the same code that I have used to highlight the perc value if it is over 66 but this didnt work.

    Cant think what else to try.

  3. #3
    Join Date
    Mar 2005
    Location
    Behind you...
    Posts
    872
    Something like below should do the trick:
    Code:
    function total(){
     var t11 = document.getElementsByClassName("FTw1"),
        t12 = document.getElementsByClassName("FBw1"),
        t13 = document.getElementsByClassName("FTp1"),
        t14 = document.getElementsByClassName("FBp1"),
        t15 = document.getElementsByClassName("FTt1"),
        t16 = document.getElementsByClassName("FBt1"),
        t21 = document.getElementsByClassName("FTw2"),
        t22 = document.getElementsByClassName("FBw2"),
        t23 = document.getElementsByClassName("FTp2"),
        t24 = document.getElementsByClassName("FBp2"),
        t25 = document.getElementsByClassName("FTt2"),
        t26 = document.getElementsByClassName("FBt1"),
        tperc = document.getElementsByClassName("perc"),
        t1 = document.getElementById("FTw1").value,
        t2 = document.getElementById("FBw1").value,
        t3 = document.getElementById("FTp1").value,
        t4 = document.getElementById("FBp1").value,
        t5 = document.getElementById("FTt1").value,
        t6 = document.getElementById("FBt1").value,
        tt1 = document.getElementById("FTw2").value,
        tt2 = document.getElementById("FBw2").value,
        tt3 = document.getElementById("FTp2").value,
        tt4 = document.getElementById("FBp2").value,
        tt5 = document.getElementById("FTt2").value,
        tt6 = document.getElementById("FBt2").value,
        ttperc = document.getElementById("perc").value,
        s11 = "FTw1",
        s12 = "FBw1",
        s13 = "FTp1",
        s14 = "FBp1",
        s15 = "FTt1";
        s16 = "FBt1";
        s21 = "FTw2",
        s22 = "FBw2",
        s23 = "FTp2",
        s24 = "FBp2",
        s25 = "FTt2";
        s26 = "FBt2";
        sperc = "perc";
      sum(t11, t1, s11, 17);
      sum(t12, t2, s12, 13);
      sum(t13, t3, s13, 14);
      sum(t14, t4, s14, 14);
      sum(t15, t5, s15, 10);
      sum(t16, t6, s16, 13);
      sum(t21, tt1, s21, 17);
      sum(t22, tt2, s22, 13);
      sum(t23, tt3, s23, 14);
      sum(t24, tt4, s24, 14);
      sum(t25, tt5, s25, 10);
      sum(t26, tt6, s26, 13);
      sum(tperc, ttperc, sperc);
     
      document.getElementById("perc").className = (document.getElementById("perc").value >= '66') ? 'highlight' : '';
    }
    
    function sum(c, t, s, p){
     t = '0';
     if(p == null || p == undefined) p = 0;
     for(var i = 0; i < c.length; i++){
      var a = c[i].value,
          b = 1*a+1*t;
      t = b;
      document.getElementById(s).value = t;
    	document.getElementById(s).className = (t >= p) ? 'highlight' : '';
     }
    }
    I just added a new argument to the sum() function that contains the 'highlight numbers' for each group. When you call the sum() function the number is just entered as the final argument.
    "Given billions of tries, could a spilled bottle of ink ever fall into the words of Shakespeare?"

  4. #4
    Join Date
    Mar 2014
    Posts
    47
    hey superkirby, I must be missing something. I just added that code to the file and uploaded it now it doesnt show any info when a dropdown box is selected. take a look:

    HTML Code:
    trifolium.besaba.com/tracks.htm

  5. #5
    Join Date
    Mar 2014
    Posts
    47
    Do i need to edit anything in the html file also?

  6. #6
    Join Date
    Mar 2005
    Location
    Behind you...
    Posts
    872
    You are missing the very last closing bracket in your tracks.js file. Be careful with your copy & paste
    "Given billions of tries, could a spilled bottle of ink ever fall into the words of Shakespeare?"

  7. #7
    Join Date
    Mar 2014
    Posts
    47
    Quote Originally Posted by Sup3rkirby View Post
    You are missing the very last closing bracket in your tracks.js file. Be careful with your copy & paste
    Perfect, thank you for this. Its always the simple things that catch people out :-)

    There should be a thanks button on this forum to thank people.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles