SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Addict
    Join Date
    Nov 2002
    Posts
    218
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Need help with concept

    The following test code works, to describe what I am trying to achieve, but I would like it to work better.

    Here is the test file: select one or more checkbox's, then mouseout to see the result.http://educatewithpurpose.com/java_test.php

    My Issues:

    For one thing I use "if" statements, I would like to use ternary operators, but can't seem to make them work.

    Also in my output statement I would like to have it read like: Select Grade(s): 1st, 2nd, 3rd (Note: the colon after the Grade(s) not a comma)

    Also, If there is a better way to do this sort of thing, I am completely open to suggestions.

    -berzerko

  2. #2
    SitePoint Wizard
    Join Date
    Jan 2004
    Location
    3rd rock from the sun
    Posts
    1,005
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Not sure if this helps..

    A lot of this depends on
    what else is in the page ie how many programmable elements etc
    what browser(s) you are catering for etc

    Have you tried element 'onchange' - google it.

    Why not create an array of elements whose id is att1, att2 etc then check their value?

    Results: instead of hiding and displaying a <div> or span change the text of innerHTML of a single <div>, or change the value shown inside a form element (bit old fashioned though)

    what you have could work if that all you are going to do, but if you are prototyping something then you are best grappling with the above..

    good luck

  3. #3
    SitePoint Wizard silver trophy
    Join Date
    May 2003
    Posts
    1,843
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" 
        "http://www.w3.org/TR/html4/loose.dtd">
    
    <html>
    <head>
    <title>untitled</title>
    <style type="text/css">
    
    body {
    	margin: 100px;
    }
    #container {
    	width: 46px;
    	border: 1px red solid;
    }
    .foo {
    	width: 40px;
    	margin: 2px;
    	border: 1px green solid;
    	background: ghostwhite;
    }
    #AAA {
    	position: relative;
    	left: 58px;
    	top: -46px;
    	font: normal 12px verdana;
    	padding: 2px 3px 3px;
    	margin-top: 10px;
    	border: 1px green solid;
    	background: ghostwhite;
    	display: none;
    }
    strong {
    	color: darkred;
    }
    
    </style>
    <script type="text/javascript">
    
    function selectGrade(oDiv)
    {
    	var AAA = document.getElementById('AAA');
    	while (AAA.hasChildNodes()) //any text?
    		AAA.removeChild(AAA.lastChild); //clear it
    	var box, i = count = 0, str = '', boxes = oDiv.getElementsByTagName('input'); //get checkboxes
    	for (i; box = boxes.item(i); ++i) //loop
    		if (box.checked)
    		{
    			str += box.value + ', '; //add value string, trailing comma
    			count++;
    		}
    	if (count)
    	{
    		var strong = document.createElement('strong'); //bold
    		strong.appendChild(document.createTextNode('Selected Grade' + ((count > 1) ? 's': '') + ': ')); //add text, check for plural
    		AAA.appendChild(strong);
    		AAA.appendChild(document.createTextNode(str.replace(/, $/, '.'))); //add text, lose final comma
    		AAA.style.display = 'inline'; //now you see it
    	}
    	else AAA.style.display = 'none'; //now you don't
    }
    
    </script>
    </head>
    <body>
    <form name="myform">
    <div id="container" onmouseout="selectGrade(this)">
       <div class="foo">
          <input type="checkbox" id="A1" value="1st" /> <strong>1</strong>
       </div>
       <div class="foo">
          <input type="checkbox" id="A2" value="2nd" /> <strong>2</strong>
       </div>
       <div class="foo">
          <input type="checkbox" id="A3" value="3rd" /> <strong>3</strong>
       </div>
    </div>	
    <!-- text display -->
       <div id="AAA"></div>
    <!-- text display -->
    </form>
    </body>
    </html>
    Statements like this.A1 =document.getElementById("A1"); make it appear you've been reading about object constructors lately! Not much use in an ordinary (global) function call without new, since this == window.

    Here's some better reading: http://www.brainjar.com/dhtml/intro/
    Last edited by adios; May 4, 2004 at 09:08.
    ::: certified wild guess :::

  4. #4
    SitePoint Addict
    Join Date
    Nov 2002
    Posts
    218
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That is definitely it! Sorry, I didn't read this before I reposted.

    -berzerko


Bookmarks

Posting Permissions

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