adding proper functionality to code.Please read comments in code andfirst test it in your browser to

Discussion in 'Javascript' started by Mclaren Fan, Nov 8, 2011.

  1. Mclaren Fan

    Mclaren Fan Guest

    <style>
    ..tiles {
    background-color:blue;
    color:yellow;
    width:200px;
    padding:5px;
    font-weight:bold;
    }
    #list1,#list2,#list3,#list4 {
    display:none;
    background-color:lightgreen;
    margin-top:0px;
    width:170px;
    margin-bottom:10px;
    }
    </style>
    <!--End of stylesheet-->
    <script>
    /* function will check if list1,list2,list3,list4, are displayed and
    then hide them and if alreday hidden will

    display them.my aim is to create a drop down menu. */
    function checker(a) {
    var propdisp=document.getElementById('list'+a).style.display;
    if (propdisp=='block') {
    document.getElementById('list'+a).style.display='none';
    document.images.arrow1.src='downarrow.png';
    /*the above line is where the problem is i dont want to change arrow1
    everytime i want to change arrow2,3,4

    according to the argument "a" passed to this function but i dont know
    how to refer to the argument a after

    arrow.will it be something like this---document.images.arrow
    +a.src='downarrow.png'*/
    }
    else {
    document.getElementById('list'+a).style.display='block';
    document.images.arrow1.src='uparrow.png';
    /*Same problem on the above line also*/
    }
    }
    </script>
    <div class="tiles" onClick="checker(1)">Home<img id="arrow1"
    src="downarrow.png"

    style="width:10px;height:10px;display:inline;"></div>
    <ul id="list1">
    <li>a</li>
    <li>b</li>
    <li>c</li>
    </ul>
    <div class="tiles" onClick="checker(2)">Tutorials<img id="arrow2"
    src="downarrow.png"

    style="width:10px;height:10px;display:inline;" ></div>
    <ul id="list2">
    <li>a</li>
    <li>b</li>
    <li>c</li>
    </ul>
    <div class="tiles" onClick="checker(3)">Games<img id="arrow3"
    src="downarrow.png"

    style="width:10px;height:10px;display:inline;" ></div>
    <ul id="list3">
    <li>a</li>
    <li>b</li>
    <li>c</li>
    </ul>
    <div class="tiles" onClick="checker(4)">Contact<img id="arrow4"
    src="downarrow.png"

    style="width:10px;height:10px;display:inline;" ></div>
    <ul id="list4">
    <li>a</li>
    <li>b</li>
    <li>c</li>
    </ul>
    Source file for downarrow.png-----http://www.clker.com/cliparts/7/d/
    2/1/119498562897811849tasto_3_architetto_franc_01.svg.med.png
    Sorce file for uparrow.png------http://www.clker.com/cliparts/d/5/b/b/
    11949856281555500779tasto_4_architetto_franc_01.svg.hi.png
     
    Mclaren Fan, Nov 8, 2011
    #1
    1. Advertisements

  2. Mclaren Fan

    Tom de Neef Guest

    You know how to assign listX to propdisp. Can't you do the same with arrowX
    ?
    currentArrow = document.images.getElementById('arrow'+a);

    Tom
     
    Tom de Neef, Nov 8, 2011
    #2
    1. Advertisements

  3. On Nov 8, 2:31 pm, Mclaren Fan wrote:
    <snip>

    document.images['arrow'+a].src = 'downarrow.png';

    <URL: http://jibbering.com/FAQ/faq_notes/square_brackets.html >

    Richard.
     
    Richard Cornford, Nov 8, 2011
    #3
    1. Advertisements

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments (here). After that, you can post your question and our members will help you out.