...

View Full Version : debugging help



esthera
09-04-2006, 12:37 PM
I have the code below.

On loading the page I don't want any of the textareas on the bottom showing. when clicking generate I want it to either display the top textarea or the bottom depending on wether banner was clicked or dropdown.

now both are displyaing. can someone help me fix my js code.




<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>test</title>

<script language="JavaScript" type="text/javascript">
<!--
function hidediv(pass) {
var divs = document.getElementsByTagName('div');
for(i=0;i<divs.length;i++){
if(divs[i].id.match(pass)){//if they are 'see' divs
if (document.getElementById) // DOM3 = IE5, NS6
divs[i].style.visibility="hidden";// show/hide
else
if (document.layers) // Netscape 4
document.layers[divs[i]].display = 'hidden';
else // IE 4
document.all.hideshow.divs[i].visibility = 'hidden';
}
}
}

function showdiv(pass) {
var divs = document.getElementsByTagName('div');
for(i=0;i<divs.length;i++){
if(divs[i].id.match(pass)){
if (document.getElementById)
divs[i].style.visibility="visible";
else
if (document.layers) // Netscape 4
document.layers[divs[i]].display = 'visible';
else // IE 4
document.all.hideshow.divs[i].visibility = 'visible';
}
}
}


function doIt() {

if (!document.form1.agree.checked) { alert("Please Read the guidlines and check the box below .");
return false; }
else{
for (var i=0; i < document.form1.interface.length; i++)
{
if (document.form1.interface[i].checked)
{
var rad_val = document.form1.interface[i].value;
}
}
if(rad_val="dropdown"){
showdiv('dropdown');

}
if(rad_val="banner"){
showdiv('banner');

}
alert('done')
}
}
// -->
</script>

</head>

<body>

<form name=form1>

<p><input type=radio name=interface value=banner>Banner <br><br>

</p>
<p><input type=radio name=interface value=dropdown>Drop-down menu<Br> </p>




<input type=checkbox name=agree>
Checking indicates you agree with the conditions below<Br>

<input type="button" id="go" name="go" value="Generate" onClick="doIt();return false;"/><br/>
<div id=dropdown visibility:invisible;>
<textarea name="t" id="t" readonly="1" style="width:30em;height:15ex;"></textarea>
</div>
<div id=banner visibility:invisible;>
<textarea name="tr" id="tr" readonly="1" style="width:30em;height:15ex;"></textarea>
</div>
</form>
</body>
</html>

Kor
09-04-2006, 01:02 PM
One of the problems appears to be related to the RegExp. A regular expression is to be written in 2 ways:
- using the slash notation
var re=/substring/flag
- using the RegExp() object
var re=new RegExp('substring','flag')

flagas are optional.

Now, your case, to handle dinamically a regular expression you must use the RegExp() object, because the match() method needs a regular expression as argument, not a string;


...
var re=new RegExp(pass)
for(i=0;i<divs.length;i++){
if(divs[i].id.match(re)){
...

esthera
09-04-2006, 01:18 PM
what are you saying I change and where?

coothead
09-04-2006, 01:39 PM
Hi there esthera,

try it like this...

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
#banner,#dropdown {
visibility:hidden;
}
#t,#tr {
width:30em;
height:15ex;
}
-->
</style>

<script type="text/javascript">
<!--
var divs=document.getElementsByTagName('div');
function showdiv(pass) {
for(i=0;i<divs.length;i++) {
if(divs[i].id==pass) {
if(document.getElementById) {
divs[i].style.visibility='visible';
}
else {
if(document.layers) { // Netscape 4
document.layers[divs[i]].display='visible';
}
else { // IE 4
document.all.hideshow.divs[i].visibility='visible';
}
}
}
if(divs[i].id!=pass) {
if(document.getElementById) {
divs[i].style.visibility='hidden';
}
else {
if(document.layers) {
document.layers[divs[i]].display='hidden';
}
else {
document.all.hideshow.divs[i].visibility='hidden';
}
}
}
}
}
function doIt() {

if(!document.form1.agree.checked) {
alert('Please Read the guidlines and check the box below .');
return false;
}
else {
for(var i=0;i<document.form1.interface.length;i++) {
if(document.form1.interface[i].checked) {
rad_val=document.form1.interface[i].value;
}
}
if(rad_val=='dropdown') {
showdiv('dropdown');
}
if(rad_val=='banner'){
showdiv('banner');
}
//alert('done')
}
}
// -->
</script>
</head>
<body>

<form name="form1" action="#">

<p><input type="radio" name="interface" value="banner">Banner <br /><br /></p>
<p><input type="radio" name="interface" value="dropdown">Drop-down menu<br /></p>

<input type="checkbox" name="agree">
Checking indicates you agree with the conditions below<br />
<input type="button" id="go" value="Generate" onClick="doIt();return false;"/><br/>

<div id="dropdown" >
<textarea id="t" readonly="readonly" rows="1" cols="1">this is the dropdown menu</textarea>
</div>

<div id="banner">
<textarea id="tr" readonly="readonly" rows="1" cols="1">this is the banner menu</textarea>
</div>

</form>

</body>
</html>
coothead

esthera
09-04-2006, 03:11 PM
thanks for your help...
How can I get them to show up in teh same place. (meaning if the second options is set then I want the textarea of the second to show up in the same place as the first)

Kor
09-04-2006, 03:29 PM
to coothead: esthera tries to referece elements which have a certain substring in their id's value string, not the precise id's value, or that is what I have understood.

And: why using the deprecated NS4 syntax or document.all? Do you think there might be someone who still has a NS4 or IE4 browser these days? Now IE and Moz and Netscape and Opera and Safari and... all of them use, at least for that kind of code, the same syntax.

Kor
09-04-2006, 03:31 PM
what are you saying I change and where?
I have shown youy exactly what to insert, see the green ones.

esthera
09-04-2006, 03:37 PM
kor yours doesn't work -- I see the 2 textboxes always.

coothead - yours works as I want but I also want the second textbox to show in place of the first if that option is chosen.

coothead
09-04-2006, 04:38 PM
Hi there esthera,

then use display instead of visibility...

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
#banner,#dropdown {
display:none;
}
#t,#tr {
width:30em;
height:15ex;
}
-->
</style>

<script type="text/javascript">
<!--
var divs=document.getElementsByTagName('div');
var rad_val=null;
function showdiv(pass) {
for(i=0;i<divs.length;i++) {
if(divs[i].id==pass) {
if(document.getElementById) {
divs[i].style.display='block';
}
else {
if(document.layers) { // Netscape 4
document.layers[divs[i]].display='block';
}
else { // IE 4
document.all.hideshow.divs[i].display='block';
}
}
}
if(divs[i].id!=pass) {
if(document.getElementById) {
divs[i].style.display='none';
}
else {
if(document.layers) {
document.layers[divs[i]].display='none';
}
else {
document.all.hideshow.divs[i].display='none';
}
}
}
}
}
function doIt() {

if(!document.form1.agree.checked) {
alert('Please Read the guidlines and check the box below .');
return false;
}
else {
for(var i=0;i<document.form1.interface.length;i++) {
if(document.form1.interface[i].checked) {
rad_val=document.form1.interface[i].value;
}
}
if(rad_val==null) {
return;
}
if(rad_val=='dropdown') {
showdiv('dropdown');
}
if(rad_val=='banner'){
showdiv('banner');
}
//alert('done')
}
}
// -->
</script>

</head>
<body>

<form name="form1" action="#">

<p><input type="radio" name="interface" value="banner">Banner <br /><br /></p>
<p><input type="radio" name="interface" value="dropdown">Drop-down menu<br /></p>

<input type="checkbox" name="agree">
Checking indicates you agree with the conditions below<br />
<input type="button" id="go" value="Generate" onClick="doIt();return false;"/><br/>

<div id="dropdown" >
<textarea id="t" readonly="readonly" rows="1" cols="1">this is the dropdown menu</textarea>
</div>

<div id="banner">
<textarea id="tr" readonly="readonly" rows="1" cols="1">this is the banner menu</textarea>
</div>

</form>

</body>
</html>
...and I agree with kor about NS4 or IE4 browsers, but then it is your code isn't it. ;)

coothead

esthera
09-04-2006, 05:39 PM
thanks coothead.. that's what i want -- i see yours works but when i copy the code to my page it somehow tried submitting to teh same page instead of just returning the dropdown --why would that be?

coothead
09-04-2006, 05:42 PM
Hi there esthera,


I see that yours works but when I copy the code to my page it somehow tried submitting
to the same page instead of just returning the dropdown --why would that be?
I would have to see your page to have a chance of answering that. ;)

By the way, if you are not really concerned about NS4 or IE4 browsers you could do it like this...

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
.none {
display:none;
}
.block {
display:block;
}
#t,#tr {
width:30em;
height:15ex;
}
-->
</style>

<script type="text/javascript">
<!--

var divs=document.getElementsByTagName('div');
var rad_val=null;

window.onload=function() {

document.forms[0][3].onclick=function() {

if(!document.form1.agree.checked) {
alert('Please Read the guidlines and check the box below.');
}
else {
for(var i=0;i<document.form1.interface.length;i++) {
if(document.form1.interface[i].checked) {
rad_val=document.form1.interface[i].value;
}
}
if(rad_val==null) {
return;
}
rad_val=(rad_val=='dropdown')?showdiv('dropdown'):showdiv('banner');
}
}
}
function showdiv(pass) {
for(i=0;i<divs.length;i++) {
if(divs[i].id==pass) {
divs[i].className='block';
}
if(divs[i].id!=pass) {
divs[i].className='none';
}
}
}
// -->
</script>

</head>
<body>

<form name="form1" action="#">

<p><input type="radio" name="interface" value="banner">Banner <br /><br /></p>
<p><input type="radio" name="interface" value="dropdown">Drop-down menu<br /></p>

<input type="checkbox" name="agree">
Checking indicates you agree with the conditions below<br />
<input type="button" id="go" value="Generate"/><br/>

<div id="dropdown" class="none">
<textarea id="t" readonly="readonly" rows="1" cols="1">this is the dropdown menu</textarea>
</div>

<div id="banner" class="none">
<textarea id="tr" readonly="readonly" rows="1" cols="1">this is the banner menu</textarea>
</div>

</form>

</body>
</html>
coothead

esthera
09-07-2006, 05:16 AM
what can I do to make this work on safari firefox and mac as well?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum