Help with Javascript program I am Working on

Question

I am working through an assignment and I have run into a problem that is weird to me and that I have no idea how to solve. It is hard to explain but hopefully I'll be able to explain it well enough for someone to understand. I am working with HTML forms (radio buttons, check boxes, select boxes, text boxes) and my teacher gave us tasks to do with the HTML in javascript. I have been getting through the tasks but after a certain point, when I try to declare an object and pull some HTML from the forms, it says it is "null". However, if I put it at the top of the page it will work but then it cancels out anything under it. (i know this sounds confusing but maybe seeing some code might help..)

   <html>
<body>
<script language="javascript">
<!--
function fred ()
{


option1=document.f1.zooanimal.option1

if(document.f1.game1.checked||document.f1.game2.checked||document.f1.game3.checked||document.f1.game4.checked)
{
return true
}
else
{
alert("Must Select at least ONE Checkbox Value!!!")
}


if (document.f1.zooanimal.selectedIndex=option1);
{
alert("Must Select Option other than default value!");
}



bigtextstr=document.f1.bigtext.value
bigedit=bigtextstr.replace(/ /g,"+")
bigedit2=bigedit.replace(/[\r\n]/g , "")

document.write("Characters in Text Area Before Edits="+"<br>")
biglen=bigtextstr.length
document.write(biglen+"<br>")

document.write("Characters in Text Area After Edits="+"<br>")
newbiglen=bigedit2.length
document.write(newbiglen+"<br>")    
}


-->
</script>
<p>
<form name="f1">
<br>
Name <input type="text" name="nametext" size="30" value="First Last"><p>
List your favorite things to do <P><textarea name="bigtext" rows="5" cols="40">default value</textarea>

<p>What is your favorite animal to see at the zoo?

<select name="zooanimal">
  <option name= "option1" selected="yes">default value
  <option name="option2">elephants
  <option name="option3">giraffes
  <option name="option4">tigers
  <option name="option5">seals
</select>

<p>
What is your favorite color?<br><p>
   blue <input name="rb" type="radio" value="blue" checked> green <input name="rb" type="radio" value="green">
  pink <input name="rb" type="radio" value="pink"> yellow <input name="rb" type="radio" value="yellow"> red <input name="rb" type="radio" value="red"> black <input name="rb" type="radio" value="black"></p>

Which of these games do you play?<br><p>
  Starcraft <input name="game1" value="Starcraft" type="checkbox"> World of Warcraft <input name="game2" value="WorldofWarcraft" type="checkbox"> 
 League of Legends <input name="game3" value="LeagueofLegends" type="checkbox"> none <input name="game4" value="none"
 type="checkbox"><P>



<p><input type="button" value="EDIT AND REPORT" onClick="fred()">


<p>

<p>
</form>
</body>
</html>

Now looking at the script part, everything works up until that point but if i try to add any other form referencing after that, it says its null. I am very confused and have been working on this for several, several hours. Can someone please help?

I think you will get the validation to work using lpd's answer, but there are a few other things you should consider fixing in you markup. Wrapping your script in  is only necessary if you target browsers that doesn't understand javascript (like Netscape 1...). Use <![CDATA[ ... ]]> instead. Also, close your tags: <p> should be closed with </p>. — Adrian Schmidt
– Adrian Schmidt, Commented May 1, 2011 at 11:04
You might also want to add labels to your form: w3.org/TR/html401/interact/forms.html#h-17.9.1 — Adrian Schmidt
– Adrian Schmidt, Commented May 1, 2011 at 11:10
Where did you learn to write using this style? No Doctype, no indenting, document.write, document.nameOfElement instead of document.getElementById, missing semicolons, using the language attribute, HTML comments to hide code, no end tags for p elements... Really, nothing personal, but this shows really bad practices. — Marcel Korpel
– Marcel Korpel, Commented May 1, 2011 at 12:35

lpd · Accepted Answer · 2012-08-23 09:07:38Z

2

When referencing [singular] objects, you should be fetching them using getElementById('elementid') or getElementsByName('elementname')[0], not attempting to delve through parent 'nodes' through to the desired element.

Also place the JavaScript either in the head of the document or at the bottom of the body. These are the best places for scripts that shouldn't run onload ;)

Additionally, be aware 'document.write' will write over the entire document. You should place a <p> in your page, give it a unique id...

<p id="unique_id_alerts"></p>

And write into it like so:

document.getElementById('unique_id_alerts').innerHTML = 'Output goes here.';

edited Aug 23, 2012 at 9:07

answered May 1, 2011 at 10:49

lpd

2,37522 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

James Allen Over a year ago

Ipd is correct, but for this to work you should consider changing your names to id so <form name='f1'> becomes <form id='fi'>. You could use the getElementsByName('elementid') method, but this is rarely used in the real world.

lpd Over a year ago

Haha overlooked that sorry. In that case use: getElementsByName('elementname')[0] :)

Marcel Korpel Over a year ago

Why is the head of the document “the best place for scripts that shouldn't run onload”? Usually, putting scripts at the end of the body element speeds things up.

Asfour · Accepted Answer · 2011-05-01 10:55:20Z

0

or if you want to get data from HTML element

you can use

jQuery("#ElementId").text();

answered May 1, 2011 at 10:55

Asfour

1203 bronze badges

Collectives™ on Stack Overflow

Help with Javascript program I am Working on

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related