www.webdeveloper.com
Results 1 to 5 of 5

Thread: Problem replace.className

  1. #1
    Join Date
    Nov 2009
    Posts
    268

    Unhappy Problem replace.className

    Can't get replace. className to work. Ul li element has id and class = 'item disabled'
    HTML
    HTML Code:
    <li class="item disabled" id="account" title="Go to Your Account.">Your Account</li>
    CSS
    HTML Code:
    #sidebar ul .item {  color:#485792; background:none; text-decoration:none; }
    #sidebar ul .disabled { color:#485792 !important; text-decoration:underline; 
     background:url(../sources/linkhover.jpg); }
    JS
    Code:
    function checkstatus(){
    var noofitems=document.getElementById('noofitems').innerHTML;
    var MyMexicali=document.getElementById('account');
    alert(MyMexicali.className);// alerts 'item disabled'
    }
    if(noofitems<1){
    MyMexicali.className='item disabled';//always true?
    }
    if(noofitems>1){
    MyMexicali.className=MyMexicali.className.replace('item disabled','');
    MyMexicali.className += 'item';
    }
     
    window.onload=function(){
    document.getElementById('noofitems').innerHTML='6';
    checkstatus();
    }
    Don't know if it's the space between the dual class or the noofitems innerHTML not returning as a number? Any advice greatly appreciated. The li id=account remains underlined with a background image?
    Last edited by THEFOOL; 08-17-2011 at 02:00 AM. Reason: The li id=account remains underlined with a background image?

  2. #2
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,689
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    <style type="text/css">
    /*<![CDATA[*/
    
    .item {  color:#485792; background:none; text-decoration:none; }
    .disabled { color:#485792 !important; text-decoration:underline;
     background:url(../sources/linkhover.jpg); }/*]]>*/
    </style>
    
    <script type="text/javascript">
    /*<![CDATA[*/
    
    function checkstatus(nu){
    var noofitems=nu;//document.getElementById('noofitems').innerHTML;
     var MyMexicali=document.getElementById('account');
     MyMexicali.className=(noofitems<1)?'item disabled':'item';
     alert(MyMexicali.className); // alerts 'item disabled'
    }
    window.onload=function(){
    //document.getElementById('noofitems').innerHTML='6';
    checkstatus(0);
    }
    
    /*]]>*/
    </script>
    </head>
    
    <body>
    <ul>
    <li class="item disabled" id="account" title="Go to Your Account.">Your Account</li>
    </ul>
    
    </body>
    
    </html>
    Vic

    God loves you and will never love you less.

    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  3. #3
    Join Date
    Nov 2009
    Posts
    268
    vw. Thanks for pointing out that the CSS rules for '.item' & '.disabled' have to be written outside of #sidebar Ul .disabled {.....}
    .disabled {.......}/*again seperatly/initiation?
    #sidebar Ul .item {.....}
    .item {.......}/*again seperatly/initiation?
    I am using the same <Docktype=Xh on IE8 and I don't have to wrap scripts in cdata tags unless it's the result of a server responce, i.e. published outside of MyDocs FOULDER onto the web. Other then that, I'll check it out today and post back later. Muchos gracias 'VW'

  4. #4
    Join Date
    Nov 2009
    Posts
    268

    Problem replace.className

    'VW' WORKS LIKE A DREAM I,LL HAVE TO READ IT A COUPLE OF TIMES TO FIGURE OUT TO USE THE QUERY CHARACHTER IN JAVASCRIPT. MUCHOS MASS GRACIAS. ???????????????? SWAMI BAGWHAN. THE SKRIPT GOD'S ANSWERED MY CALL AGAIN.

    NOW TO PASTE THE INLINE CODE 'noT' WRAPED with !<CDATA TAGS tags in myDocs folder into my external.js on IE8 NOT REQUIRING AN EXTERNAL SERVER TO RUN IT. EVEN WITH THE COMMENT OUT TAGS /* */ WILL BE HIDDEN FROM THE BROWSER BOTH /* AND !<CDATA tags.
    Last edited by THEFOOL; 08-17-2011 at 02:47 PM.

  5. #5
    Join Date
    Nov 2009
    Posts
    268

    Problem replace.className

    VW 'KNOWLEDGE' from now-on. THE FOOL only questions the reason for not stating that 'A JAVASCRIPT ? QUERY only returns one result and therefore you need a second statement to change the the result when the 'noofitems' value is changed manualy in the html the first query ? is set on a patern and checks the string "item disabled" for a match without using the match() or test() property of javascript as they must be obsolete if they have no security value. You did not say that a replace statement was necessary, and you did not demonstrate the true power of .js ? So I, 'THEFOOL' shall finish demonstrate how the ? cuts out 'if(){ } statement brackets in your script.
    Code:
    function checkstatus(nu){
    var noofitems=nu;//document.getElementById('noofitems').innerHTML;
    var MyMexicali=document.getElementById('account');
    MyMexicali.className=(noofitems<1)?'item disabled':'item'
    alert(MyMexicali.className); // alerts 'item'            MyMexicali.className=(noofitems<1)?'item':'item disabled'
    alert(MyMexicali.className); // alerts 'item disabled'
    }
    
    window.onload=function(){
    document.getElementById('noofitems').innerHTML='0';
    document.getElementById('ordersum').innerHTML='0.00';
    sidebarover(); 
    sidebarout();
    checkstatus();
    }
    You have to take the alerts out to actualy view the change on the hover styled ul as the ALERTS prohibit you hovering over the link without hitting the ok. button and the final change would have already bin made. querying the ul li id or text string might actualy set up prepared onclick database queries and sql select From TABLE queries. I'd like to see a loop through ul li elements that grabs their string and adds the products.php? page for all the ul li elements with LI.ID writing each case[] like
    Code:
    function readlink(){
    var links=document.getElementById('ulID').childNodes.length;
    links=iObj;
    for(var i=0;i<iObj.length;i++){
    iObj[i].onclick=function(){sqljewelry(this);};
    }
    };
    function sqljewelry(li.id){
    case:sidebar.ul.id="silver"{
    //set up ajax call for select db mydb, SELECT*FROM"+silver+" table;
    //posable with javascript query ? match on strings in links aray but no loop, wow!:cool:
    {
    case:sidebar.ul.id="Gold""{
    //set up ajax call for select db mydb, SELECT*FROM"+gold+" table;
    {
     
    window.onload=function(){readlink();}

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