JavaScript Forum

**Asiri** · 06-20-2008, 08:01 PM

Ok, I'm quite new to javascript, and so far have managed to get through what I was attempting to do, but have come to a small problem I just can't get past after hours of searching.

I'm currently working on a script for a small online application, and ontop of the functions I've done already I want them to:

Upon adding a value to a hidden field, hide the other radio buttons with the same value and then to show the radio buttons again if the value in that field changes.

I've started, but it's just not working, and any advice would be very much appreciated.

Here's the html code:

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>

  <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
  <meta http-equiv="Content-Language" content="en-gb" />

  <title>Test</title>

  <script type="text/javascript" src="custom.js"></script>

</head>

<body>

<div id="content">

<div id="showcrit1">Lagu Wind Seeker<div id="showdefcrit1"><strong>Not Defended</strong></div></div>
<a href="#" onclick="showhide('selectcrit1'); return(false);">Select Crit 1</a>

<div id="selectcrit1" style="width: 400px; background: #666666; border: 1px solid black; padding: 10px; display: none">
<strong>Select Crits</strong>
<br />
<br />

<form name="selectcrit1">
<input type="radio" id="Not Defended" name="crit1" value="0" onclick="addcrit(1);" checked="checked" /> Not Defended<br />
<input type="radio" id="dfgdfg" name="crit1" value="1" onclick="addcrit('1');" /> dfgdfg<br />
<input type="radio" id="Poisonspinner Shaitan" name="crit1" value="6" onclick="addcrit('1');" /> Poisonspinner Shaitan<br />
<input type="radio" id="Phoenix Alerion" name="crit1" value="7" onclick="addcrit('1');" /> Phoenix Alerion<br />
<input type="radio" id="Ayor Wind Keeper" name="crit1" value="9" onclick="addcrit('1');" /> Ayor Wind Keeper<br />

<input type="radio" id="Ayor Wind Keeper" name="crit1" value="11" onclick="addcrit('1');" /> Ayor Wind Keeper<br />
<input type="radio" id="Putrid Si'lah" name="crit1" value="14" onclick="addcrit('1');" /> Putrid Si'lah<br />
</form>
</div>

<br />
<br />

<div id="showcrit2">Lagu Wind Seeker<div id="showdefcrit2"><strong>Not Defended</strong></div></div>
<a href="#" onclick="showhide('selectcrit2'); return(false);">Select Crit 2</a>

<div id="selectcrit2" style="width: 400px; background: #666666; border: 1px solid black; padding: 10px; display: none">
<strong>Select Crits</strong>
<br />
<br />

<form name="selectcrit2">
<input type="radio" id="Not Defended" name="crit2" value="0" onclick="addcrit(2);" checked="checked" /> Not Defended<br />
<input type="radio" id="dfgdfg" name="crit2" value="1" onclick="addcrit('2');" /> dfgdfg<br />
<input type="radio" id="Poisonspinner Shaitan" name="crit2" value="6" onclick="addcrit('2');" /> Poisonspinner Shaitan<br />

<input type="radio" id="Phoenix Alerion" name="crit2" value="7" onclick="addcrit('2');" /> Phoenix Alerion<br />
<input type="radio" id="Ayor Wind Keeper" name="crit2" value="9" onclick="addcrit('2');" /> Ayor Wind Keeper<br />
<input type="radio" id="Ayor Wind Keeper" name="crit2" value="11" onclick="addcrit('2');" /> Ayor Wind Keeper<br />
<input type="radio" id="Putrid Si'lah" name="crit2" value="14" onclick="addcrit('2');" /> Putrid Si'lah<br />
</form>
</div>

<br />
<br />

<div id="showcrit3">Lagu Wind Seeker<div id="showdefcrit3"><strong>Not Defended</strong></div></div>
<a href="#" onclick="showhide('selectcrit3'); return(false);">Select Crit 3</a>

<div id="selectcrit3" style="width: 400px; background: #666666; border: 1px solid black; padding: 10px; display: none">
<strong>Select Crits</strong>
<br />
<br />

<form name="selectcrit3">
<input type="radio" id="Not Defended" name="crit3" value="0" onclick="addcrit(3);" checked="checked" /> Not Defended<br />

<input type="radio" id="dfgdfg" name="crit3" value="1" onclick="addcrit('3');" /> dfgdfg<br />
<input type="radio" id="Poisonspinner Shaitan" name="crit3" value="6" onclick="addcrit('3');" /> Poisonspinner Shaitan<br />
<input type="radio" id="Phoenix Alerion" name="crit3" value="7" onclick="addcrit('3');" /> Phoenix Alerion<br />
<input type="radio" id="Ayor Wind Keeper" name="crit3" value="9" onclick="addcrit('3');" /> Ayor Wind Keeper<br />
<input type="radio" id="Ayor Wind Keeper" name="crit3" value="11" onclick="addcrit('3');" /> Ayor Wind Keeper<br />
<input type="radio" id="Putrid Si'lah" name="crit3" value="14" onclick="addcrit('3');" /> Putrid Si'lah<br />

</form>
</div>

<br />
<br />

<div id="showcrit4">Lagu Wind Seeker<div id="showdefcrit4"><strong>Not Defended</strong></div></div>
<a href="#" onclick="showhide('selectcrit4'); return(false);">Select Crit 4</a>

<div id="selectcrit4" style="width: 400px; background: #666666; border: 1px solid black; padding: 10px; display: none">
<strong>Select Crits</strong>
<br />
<br />

<form name="selectcrit4">
<input type="radio" id="Not Defended" name="crit4" value="0" onclick="addcrit(4);" checked="checked" /> Not Defended<br />
<input type="radio" id="dfgdfg" name="crit4" value="1" onclick="addcrit('4');" /> dfgdfg<br />
<input type="radio" id="Poisonspinner Shaitan" name="crit4" value="6" onclick="addcrit('4');" /> Poisonspinner Shaitan<br />
<input type="radio" id="Phoenix Alerion" name="crit4" value="7" onclick="addcrit('4');" /> Phoenix Alerion<br />
<input type="radio" id="Ayor Wind Keeper" name="crit4" value="9" onclick="addcrit('4');" /> Ayor Wind Keeper<br />

<input type="radio" id="Ayor Wind Keeper" name="crit4" value="11" onclick="addcrit('4');" /> Ayor Wind Keeper<br />
<input type="radio" id="Putrid Si'lah" name="crit4" value="14" onclick="addcrit('4');" /> Putrid Si'lah<br />
</form>
</div>

<br />
<br />

<br />

<form name="critlist" action="defend.php?action=defend&id=2" method="post">

<input type="hidden" name="crit1" value="" id="crit1" />

<input type="hidden" name="crit2" value="" id="crit2" />

<input type="hidden" name="crit3" value="" id="crit3" />

<input type="hidden" name="crit4" value="" id="crit4" />

<input type="submit" value="Defend Attack" />

</form>

</div>

</body>

</html>

and the javascript:

Code:

function showhide(id) {
  if (document.getElementById) {
    obj = document.getElementById(id);
    if (obj.style.display == "none") {
      obj.style.display = "block";
    } else {
      obj.style.display = "none";
    }
  }
}

function addcrit(number) {

  var total = 0;

  for (i = 0; i < 7; i++) {
    if (document.forms['selectcrit' + number].elements[i].checked) {
    total = document.forms['selectcrit' + number].elements[i].value;
    showcrit(document.forms['selectcrit' + number].elements[i].id, 'showdefcrit' + number);
    }
  }
  
  var newh = document.getElementByValue(total);
  var count = newh.length-1;

  for ( i = count; i >= 0; i-- ) {     
    newh[i].parentNode.removeChild(newh[i]);
  }

  document.getElementById('crit' + number).value = total;
  showhide('selectcrit' + number);

}

function showcrit(crit, div) {

  document.getElementById(div).innerHTML = 'Vs. ' + crit;

}

the script was working perfectly to do what I wanted like I said, then upon deciding to attempt to remove items aswel once selected, it stopped working, I imagine I completly got it wrong though, the part I added extra was:

Code:

  var newh = document.getElementByValue(total);
  var count = newh.length-1;

  for ( i = count; i >= 0; i-- ) {     
    newh[i].parentNode.removeChild(newh[i]);
  }

Any advice would be great thanks.

**chrishirst** · 06-21-2008, 03:45 AM

There is no standard method called "getElementByValue" and you don't appear to have one defined in your javascript.

**Asiri** · 06-21-2008, 05:37 AM

Like I said I'm new to this, I knew you could do via ID and name, so I googled the value version and found quite a few references to it working but I must of miss read or something.

The problem is that the values are shared between various elements and are what I need to remove because they are the ID of the item that can't be selected more than once.

**Asiri** · 09:38 PM

Ok, I've been working more on this, and got a new function that's building an array, and I have it working up until the very end where it's just removing the items that I want, here's the updated javascript:

Code:

var items = 7;

function showhide(id) {
  if (document.getElementById) {
    obj = document.getElementById(id);
    if (obj.style.display == "none") {
      obj.style.display = "block";
    } else {
      obj.style.display = "none";
    }
  }
}

function addcrit(number) {

  var total = 0;

  for (i = 0; i < items; i++) {
    if (document.forms['selectcrit' + number].elements[i].checked) {

    total = document.forms['selectcrit' + number].elements[i].value;
    showcrit(document.forms['selectcrit' + number].elements[i].id, 'showdefcrit' + number);

    }
  }

  document.getElementById('crit' + number).value = total;

  if ( total != 0 )
    items = hidecrit(document.getElementById('crit' + number).value, total);

  showhide('selectcrit' + number);

}

function showcrit(crit, div) {

  document.getElementById(div).innerHTML = 'Vs. ' + crit;

}

function hidecrit(oldcrit, id) {

  var newcrits = new Array();
  var oldcrits = new Array();
  var form = 1;
  var einc = 0;
  var ninc = 0;
  var oinc = 0;
  var mod = 1;

  for (i = 1; i <= ( items * 4 ); i++) {

    if ( document.forms['selectcrit' + form].elements[einc].value == id ) {

    newcrits[ninc] = document.forms['selectcrit' + form].elements[einc];

    ninc++;
    }

    if ( document.forms['selectcrit' + form].elements[einc].value == oldcrit ) {

    oldcrits[oinc] = document.forms['selectcrit' + form].elements[einc];

    oinc++;
    }

    if ( i == ( items * mod ) ) {
      form++;
      einc = 0;
      mod++;
    } else
        einc++;

  }

  var oldcount = oldcrits.length;

  for ( i = 0; i > oldcount; i++ ) {   
    oldcrits[i].parentNode.appendChild(oldcrits[i]);
  }

  var newcount = newcrits.length-1;

  for ( i = newcount; i >= 0; i-- ) {     
    newcrits[i].parentNode.removeChild(newcrits[i]);
  }

  return (items - 1);

}

I know it's a bit long winded, but I couldn't find a better way to use it. It works, and builds the array with the right id's and removes the first instance you select. But I can't get it now to readd the old selection and hide the new one.

**Asiri** · 06-21-2008, 09:40 PM

I've just updated my previous post with the newer code, it's now hiding the items that are ment to be hidden better, and skipping those that are allowed to be selected multiple times.

Also added a new array using the old hidden form field value for which items are already hidden, and it's adding 4 items to the array, but they appear to be blank so when they go into the appendChild loop, they are not doing anything.

However, I'm not sure if the use of appendchild is correct, so any help with the last part of the code would be very much appreciated.

Thank you.