PDA

View Full Version : innerHTML Question

nisim777
06-26-2009, 10:08 AM
As I've mentioned before for those who have read my threads, I am new to JavaScript, but not to programming. Right now, I am trying to learn all I can about JavaScript. Here is my current issue:

I am playing around with innerHTML. I know, DOM scripting is the standardized way to go, innerHTML is a Microsoft technology, etc. I will be learning DOM manipulation, but I still want to know how innerHTML works. I have a script with two radio buttons. When I click one, I want it to brute force my HTML and insert the proper response. As it stands, I currently get a response of 'undefined.' According to the logic of the code, I cannot see anything wrong. I am sure it is a syntax issue and just something I do not yet understand in JavaScript. Here is the code:

<html>
<head>

</head>
<body>
<script type="text/javascript">
function changeText2(){
var userInput = document.getElementsByName('sport').value;
document.getElementById('boldStuff2').innerHTML = userInput;
}
</script>
<p>Your favorite sport is <b id='boldStuff2'></b> </p>
<form>
<input type='radio' name='sport' value='baseball' onchange='changeText2()' />Baseball
<input type='radio' name='sport' value='football' onchange='changeText2()' />Football
</form>


</body>
</html>

Thanks for any help.
coothead
06-26-2009, 12:27 PM
Hi there nisim777,
...I am trying to learn all I can about JavaScript.
I would also suggest that you learn all you can about HTML. :agree:
This means getting into the habit of writing valid code. :agree:
So always start your pages in a similar manner to this...

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">

<title></title>

<style type="text/css"></style>

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

</head>
<body>

<div></div>

</body>
</html>
Notice that the javascript is placed within the head section not the body.

Moving on to your problem...
As it stands, I currently get a response of 'undefined.'
According to the logic of the code, I cannot see anything wrong.
Your understanding of document.getElementsByName() is incorrect. :disagree:
It creates an object array of all elements with the same name.
In your example, there are two elements with the name "sport".
The reason that you get "undefined" for document.getElementsByName('sport').value is that no element has been specified.
Specifying each element in the array is done like this...
document.getElementsByName('sport')[0].value;
document.getElementsByName('sport')[1].value;
The modern method of javascripting is to remove it completely from the markup.
This means removing the onload event handler from the body tag and the onclick event handler etc. from the elements.

Putting all this together you should end up with something like this...

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">

<title></title>

<style type="text/css">
#boldStuff2 span {
font-weight:bold;
color:#300;
}
</style>

<script type="text/javascript">
function changeText2(){

var userInput = document.getElementsByName('sport');

/***********************/
alert(userInput);
/***********************/

for (c=0;c<userInput.length;c++) {
userInput[c].onclick=function() {
document.getElementById('boldStuff2').innerHTML=
'Your favorite sport is <span>'+this.value+'<\/span>';
}
}
}
if(window.addEventListener){
window.addEventListener('load',changeText2,false);
}
else {
if(window.attachEvent){
window.attachEvent('onload',changeText2);
}
}
</script>

</head>
<body>

<p id="boldStuff2">&nbsp;</p>

<form action="#">
<div>
<input type="radio" name="sport" value="baseball">Baseball
<input type="radio" name="sport" value="football">Football
</div>
</form>

</body>
</html>
nisim777
06-26-2009, 12:41 PM
Thanks for the reply. I appreciate the suggestion to learn valid HTML, and I absolutely see from my posts why you would think I do not know it. I have actually been writing valid (X)HTML and CSS for years. I just threw this together in a few seconds to test something. It may be bad practice, but I never declare a doctype and such unless I am actually working on something for production. It's just me being lazy.

The reason I am just getting to JavaScript (after years of being a web designer) is because I was trained in a government environment where JavaScript was not allowed on our intranet. I never really took the time to look at it outside of that environment. However, now that AJAX is such a big deal, I thought I would learn the language. Coupled with my PHP knowledge, it will definitely be helpful.

Thank you for your response. The code makes sense to me. I just have to learn the general JavaScript objects and methods (for instance, I did not know about the 'addEventListener' until yesterday when you posted on my first post).
coothead
06-26-2009, 12:56 PM
Hi there nisim777,

I am sorry if I appeared to treat you as a novice to coding, but I have this habit of writing posts,
not just for the OP's benefit, but also for the benefit of the many visitors that we have to this site. ;)
nisim777
06-26-2009, 03:30 PM
Coothead,

I completely understand. I thank you for your insight, and it is better for me to get redundant information than to not ever get that information.
coothead
06-26-2009, 04:24 PM
Thanks, for the :thumbup: on this. :agree:
Jon Hanlon
06-28-2009, 08:39 PM
Hi Nisim,
You are using the getElementsByName (http://msdn.microsoft.com/en-us/library/ms536438(VS.85).aspx) method which will return a collection (http://msdn.microsoft.com/en-us/library/ms533048(VS.85).aspx).
A Collection is pretty-much an Array (subtle differences), so you need to use Array syntax [] when examining its elements.