Hi everyone,
Many thanks for looking. Here's the problem.
I have a form with three option buttons. Depending on what one the user clicks on I need a particular div to be shown, while the other two divs are to be removed.
The only problem is that the removeChild doesn't work. I have worked on this for 3 or four hours now and can't find a solution. Any help would be great as I'm not so hot with javascript.
Here's the code that I need to tweak.
function removeElement_old(REMOVE_DIV){
var d = document.getElementById('sidebar');
var d_nested = document.getElementById(REMOVE_DIV);
if (d_nested.parentNode == d) {
d.removeChild(REMOVE_DIV);
document.getElementById("sidebar").removeChild(REMOVE_DIV);
alert("Removed div "+ d_nested.id);
}
else{
alert("Did not remove div " + d_nested.id);
}
}//Closing function
function removeElement(parentDiv, childDiv){
if (childDiv == parentDiv) {
alert("The parent div cannot be removed.");
}
else if (document.getElementById(childDiv)) {
var child = document.getElementById(childDiv);
var parent = document.getElementById(parentDiv);
parent.removeChild(child);
}
else {
alert("Child ("+childDiv+") div has already been removed or does not exist.");
return false;
}
}
function switchToDiv(DIV){
alert("Div being passed in is: "+DIV);
var packageWrite = "";
var hotelWrite = "";
var flightWrite = "";
if ( DIV == 'package' ){
removeElement('sidebar','hotel');
removeElement('sidebar','flight');
packageWrite = "<p>Package shown</p>";
document.getElementById(DIV).innerHTML = packageWrite;
}
else if ( DIV == 'hotel'){
removeElement('sidebar','package');
removeElement('sidebar','flight');
hotelWrite = "<p>hotel shown</p>";
document.getElementById(DIV).innerHTML = hotelWrite;
}
else if( DIV == 'flight'){
removeElement('sidebar','hotel');
removeElement('sidebar','package');
flightWrite = "<p>flight shown</p>";
document.getElementById(DIV).innerHTML = flightWrite;
}
else{
alert('No search cat selected');
return false;
}
}//closing functionSo just to explain the code a bit. I call the switchToDiv function from my HTML. Depending on what I pass in, a specific div is shown. Except that only works for the first item picked. Once I pick an item any more choices after that do not work.
The two functions at the top are two different approaches to me trying to solve the problem.
Many thanks.
