JavaScript - Document.getelementsbyclassname Not Work

Hi, any help with this would be very much appreciated.

Apologies for cross-posting. I think I ut this in the wrong place to begin with.

I have a script containing functions to change an image from clicking a button or changing the selection in a combobox.
The buttons either request that the next image in the array is called or the previous, depending on the button. The combo box changes to the chosen
image.

The script works fine for me in firefox and safari but I can't get it to work in ie and aftermany hours I can't see any reason why.

As far as I can work out the problem with the script is in the changeImage
function while trying to set the new image.
Code:

 
document.images['priceImg'] = followingImg;
document.images['priceImg'].src = followingSrc;

Thanks in advance.


The following is the script:

Code:

var followingImg;
var followingSrc;
var presentImg;
var presentSrc;
var count = 0;

// Create an array of price list page images and locations
var numImages = 8;
var pimages=new Array();
pimages[0]=new Image();
pimages[0].src="../images/priceList/price_walls.jpg";
pimages[1]=new Image();
pimages[1].src="../images/priceList/price_nestle.jpg";
pimages[2]=new Image();
pimages[2].src="../images/priceList/price_franco.jpg";
pimages[3]=new Image();
pimages[3].src="../images/priceList/price_ben1.jpg";
pimages[4]=new Image();
pimages[4].src="../images/priceList/price_ben2.jpg";
pimages[5]=new Image();
pimages[5].src="../images/priceList/price_ron.jpg";
pimages[6]=new Image();
pimages[6].src="../images/priceList/price_cartridge_9654.jpg";
pimages[7]=new Image();
pimages[7].src="../images/priceList/price_sun1.jpg";
pimages[8]=new Image();
pimages[8].src="../images/priceList/price_sun2.jpg";


// Retrieves the current image from the image element
function getCurImage() {

	if (document.images) {

		presentImg = document.images['priceImg'];
		presentSrc = document.images['priceImg'].src;

		var curId = 0;

		// Loops through pimages array to find which image is currently being displayed
		for (i=0;i<pimages.length;i++) {
			if (pimages[i].src == presentSrc) {
				curId = i;
			}
		}

		return curId;

	}

}

//**************************//
// I think this is where it has trouble //
//**************************//

// Sets the new image
function changeImg() {

	document.images['priceImg'] = followingImg;
	document.images['priceImg'].src = followingSrc;

}

// Called by 'next' button.
// Calls getCurrentImg then chooses the next image then calls changeImg.
function slideItForward() {

	var curID = getCurImage();

	if (count == 0) {
		followingImg = pimages[0];
		followingSrc = pimages[0].src;
		count++;
	} else {
		// Add one to current image id for next image
		var nextId = (curID + 1);
		if (nextId <= numImages) {
			followingImg = pimages[nextId];
			followingSrc = pimages[nextId].src;
		// If at end of images stay on same page
		} else {
			followingImg = document.images['priceImg'];
			followingSrc = document.images['priceImg'].src;
		}
	}
	// display new image
	changeImg();
	setText(nextId);
}

// Called by 'previous' button.
// Calls getCurrentImg then chooses the next image then calls changeImg.
function slideItBackward() {
	var curID = getCurImage();

	// take one from current image id for next image
	var nextId = (curID - 1);
	if (nextId >= 0) {
		followingImg = pimages[nextId];
		followingSrc = pimages[nextId].src;
	// If at start of images stay on same page
	} else {
		followingImg = document.images['priceImg'];
		followingSrc = document.images['priceImg'].src;
	}
	// display new image
	changeImg();
	setText(nextId);
}

// Called by optionbox "newPage".
// Takes users choice and displays it.
function choosePage(page) {

	if (page == 1) {
		// Retrieve combobox option and its value
		var index = document.getElementById('newPageOne').selectedIndex;
		var newId = document.getElementById('newPageOne').options[index].value;
	} else {
		// Retrieve combobox option and its value
		var index = document.getElementById('newPageTwo').selectedIndex;
		var newId = document.getElementById('newPageTwo').options[index].value;
	}

	// Convert string to int
	newId = parseInt(newId);

	// If new id is default setting do nothing
	if (newId == 0) {
		return;
	// Else choose the image from the pimages array and call changeImg
	} else {

		// Changes value to accomodate for value vs array position
		newId = (newId - 1);

		followingImg = pimages[newId];
		followingSrc = pimages[newId].src;

		// display new image
		changeImg();
		document.getElementById("newPageOne").value = (newId+1);
		document.getElementById("newPageTwo").value = (newId+1);
	}

}

// Changes the text in the combobox
function setText(id) {

	id = id + 1;
	document.getElementById("newPageOne").value = id;
	document.getElementById("newPageTwo").value = id;
	//document.getElementsByName('newPage').value = id;
}

The following is the relevent section of the html:

Code:

<input style="margin-bottom:10px; margin-top: 20px" type="button" name="PreBut" value="Previous" onclick="slideItBackward();" />
			&nbsp;&nbsp;&nbsp;<input style="margin-bottom:10px" type="button" name="nxtBut" value="Next" onclick="slideItForward();" />
			&nbsp;&nbsp;&nbsp;<select style="margin-bottom:10px" name="newPage" id="newPageOne" onchange="choosePage(page = 1);">

			<option value="1"> Walls </option>
			<option value="2"> Nestle, Treats and Cadburies Impulse </option>
			<option value="3"> Franco, Mars and Ijsboerke Impulse </option>
			<option value="4"> Bennets Scooping </option>
			<option value="5"> Bennets Scooping Cont.. </option>
			<option value="6"> Individual tubs and Ice cream cartridges </option>
			<option value="7"> Ronaldo Ice creams and Sorbets </option>
			<option value="8"> Sundries, Cones, etc </option>
			<option value="9"> Sundries, Cones, etc Cont.. </option>
			</select>

			<center>
			<div id="price-display">
				<img src="../images/priceList/price_img1.jpg" id="priceImg" name="priceImg" alt="Robertos Ice cream wholesale pricelist" ></img>
			</div>
			</center>

			<input style="margin-top: 10px" type="button" name="preBut" value="Previous" onclick="slideItBackward();" />
			&nbsp;&nbsp;&nbsp;<input type="button" name="nxtBut" value="Next" onclick="slideItForward();" />
			&nbsp;&nbsp;&nbsp;<select name="newPage" id="newPageTwo" onchange="choosePage(page = 2);">

			<option value="1"> Walls </option>
			<option value="2"> Nestle, Treats, Cadburies Impulse </option>
			<option value="3"> Franco, Mars Ijsboerke Impulse </option>
			<option value="4"> Bennets Scooping </option>
			<option value="5"> Bennets Scooping Cont.. </option>
			<option value="6"> Individual tubs and Ice cream cartridges </option>
			<option value="7"> Ronaldo Ice creams and Sorbets </option>
			<option value="8"> Sundries, Cones, etc </option>
			<option value="9"> Sundries, Cones, etc Cont.. </option>
			</select>

I wanted to know if document.getElementById works while accessing form elements.
I tried doing this just for testing purposes

This code doesnt work
function validateForm()
{
var val = document.getElementById("id_login").getAttribute("value");
alert(val);
return false;
}

but this does
function validateForm()
{
alert(document.myForm.text_login.value );
return false;
}

Why doesnt document.getElementByid work with form objects.it works with all non form HTML objects..

hi all,

im on a really tight deadline with this and have been strugglign all day.
(i know nothing about JS!)

here's my code:

Code:

<script language="Javascript">
var allHTMLTags = new Array();
function fadeIn(SRC) {
var allHTMLTags=document.getElementsByTagName("*");
for (i=0; i<allHTMLTags.length; i++) {
if (allHTMLTags[i].className.indexOf(",") !== -1) 
{
allHTMLTags[i].style.opacity='1';
}
}
}

function fadeOut(SRC) {
var allHTMLTags=document.getElementsByTagName("*");
for (i=0; i<allHTMLTags.length; i++) {
if (allHTMLTags[i].className.indexOf(",") !== -1) 
{
allHTMLTags[i].style.opacity='0.5';
}
}
}
</script>


<li onMouseover="fadeIn(foo)" onmouseout="fadeOut(foo)">

<div class="foo" style="opacity: 0.5;">
test 1
</div>

<div class="foo bar" style="opacity: 0.5;">
test 2
</div>

The idea of the above, is that when you hover over the <li> all of the divs with a class CONTAINING "foo" are given an opacity of 1.
the problem is, the above script only seems to work with numbers?!
E.G - class="1 2" works fine.
problem is i need to use words not numbers for the classes.

clearly my code is rubbish, i've bodged it together from bits and pieces of different forums.

PLEASE can somebody help?
the end result needs to go through and find all divs with a class CONTAINING the term specified in the <li>
then give them an opacity of 1, then on mouseOut return the opacity to 0.5

im sure this is newb stuff, but thanks in advance for any help you can give!

My code is here and it works ...
However, I would like my dynamic table to show on the same page as my body and not on a new blank page. I have created a DIV and try playing around with the document.getElementById('monTab').innerHTML but it's not working out for me ...

What am i missing ?

Regards,

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD><TITLE>new Script - Javascript Cours 11</TITLE>
<META content="text/html"; charset="UTF-8" http-equiv="content-type">
<SCRIPT type="text/javascript">
	
   

	function createTable(){
	var Etudiant = new Array(Number(prompt("How many Students will you put in ?","")));

	document.write("<table border=\"1\">");
	for (var i=0; i<Etudiant.length; i++) {
	Etudiant[i] = window.prompt("S'il vous plait entrez le nom d'un etudiant " + (i+1) + ".","")
	alert("Nice to see you "+Etudiant[i]);
	
	document.write("<td>"+Etudiant[i]+"</td>");
	j = parseInt(prompt("Combien de notes voulez vous calculez ?"));
	for (h=0;h<j;h++){ 
	notes[h] = parseInt(prompt("S'il vous plait entrez la "+(h+1)+" note de "+Etudiant[i]));
	document.write("<td>"+notes[h]+"</td>");
	}
	
	
	document.write("<tr>");
	}


	
	document.write("</tr>");
	document.write("</table>");
	document.getElementById('monTab').innerHTML=Etudiant;
}


	</script>
<BODY>

<H1>Combien de note voulez vous cumulez ?</H1>
<br>
<br>

<input type="button" name="btnSubmit" value="TRY IT" onclick="createTable()">
<div id="monTab" size="10"> Content should come here ...Content should come here ...Content should come here ...Content should come here ...Content should come here ...Content should come here ...Content should come here ... </div>
</BODY>
</HTML>

I found this line in one of the scripts on javascript.kit

<code>
if(document.layers|| document.getElementById|| document.all)
</code>

Could someone give me an idea on why this line would be used in a code?

Thank you very much

I'm working on a website that will basically embed a widget/frame sent by a handler into a user's current page. The user basically adds a script tag to where they would like the HTML to be. The script tag has their settings and is basically a document.write that calls all the code that we want displayed.

So here's my problem. We have a map that we need to add in a specific section, and to get the map we have to call another script tag. So we end up having a script tag (map) embedded in another script tag (the code for the widget/frame) or we end up having to document.write inside a document.write.

Now this works just fine and as expected in Firefox, Safari, and Chrome. However, Internet Explorer and Opera wait until the first document.write is completely finished before calling the embedded one. Of course the problem with this, is that it takes the map out of the document's flow and just appends it to the bottom left of the page. Since the rest of the page has already been called, there's no way to move the interior "map" script.

Any ideas? Basically just trying to figure out how (if even possible) to render an embedded script tag in Internet Explorer and be able to place it properly. I've tried everything that I can think of, including AJAX and Google's unescape script.

Any suggestions, I'd greatly appreciate it. Or even if you've encountered a similar problem, and know that it just isn't possible in IE or Opera, that would be fine too.

Thanks in advance!

Hello all, I made a fade script that will fade any element in or out. Works great on all browser I've tested but IE 7. With IE I have only tested this will IE 8 and IE 7. IE 7 the effect doesn't work. No error message or anything. I'm unsure what to do from here. I was hoping I could find some help here.

Code:

function fade(obj, duration, toggle) {
	steps = 1000;
	elem = document.getElementById(obj);
		
	function fadeIn() {
		for(var i = 0; i <= 1; i+=(1/steps)) {
				setTimeout("elem.style.opacity = "+ i +"", i * duration);
				setTimeout("elem.style.filter='alpha(opacity="+ i * 102 +")'", i * duration);
		}
	}
	
	function fadeOut() {
		for(var i = 0; i <= 1; i+=(1/steps)) {
				setTimeout("elem.style.opacity = "+ (1-i) +"", i * duration);
				setTimeout("elem.style.filter='alpha(opacity="+ (1-i) * 102 +")'", i * duration);
		}
	}
	
	/* One for Fade in and anything will be fade out*/
	if(toggle == 1) {
	fadeIn();
	}
	else {
	fadeOut();
	}
	
}

Thanks,
Jon W

I have a html file and a separate javascript file.

The html file contains: <input type="reset" id = "resetButton" />

I want a message to pop up if the reset button is pressed.

So in the js file I have:
document.getElementById("resetButton").onclick = doAlert;

doAlert is a function that simply does: alert("Do you want to reset?");

I know my separate js file is linked correctly because if I just put in alert("hello"); in the js file then it works. But if I use the document.getElementById thing in the js file, then there is an error. The error, according to the error console, says that "resetButton" is null. Can someone help me? thanks!

btw, I'm totally new to programming...and I need to do this for my homework assignment

I'm sorry if this question seem very basic but I just start learning javascript.
I would like to display an image but not sure why it is not working. In a nutshell, here's my code

Code:

<html>
<head></head>
<body>

<script type="text/javascript">
document.writeln("<img src=/"xMark.jpg /" width=25 height=25 >");</script>

</body>
</html>

Hello, I'm new to Javascript.

I know how to make a script that when you click on a button it changes a variable. I also know that with document.write I can express this variable but I do not know how to refresh document.write!

For example,

if I have a var car =3
and when I click on a button car++ (or increases by 1 so it becomes 4 then 5 and so forth depending how many times you click the button)
and I write document.write (car), it only shows the 3 and no matter how many times I click on the button, the 3 doesn't change. How can I get the document.write to show the updated variable?

Thanks!

So I want to have a button that when I click it will change this variable and that number will change live on the page.

I have this nice little piece of code that Bullant (CodingForum Senior Coder) helped me with. And it works flawlessly!
I want to put it in the same document twice. I've tried to tweak the code so that each script is unique, but to no avail
Both scripts work by themselves, but when placed together on the same page - the first one fails.
Here is the test-site where it is being used: http://metrobilia.worldsecuresystems.com/stools.html#
Here's what I'm doing (see below):
Any help would be greatly appreciated!

Code:

<head>
	<link href="/stylesheets/styles.css" rel="stylesheet" type="text/css" />
	
	<script type="text/javascript">
        var picData = [
            ['images/template2/fpo1_templ2.jpg','URL_for_one'],
            ['images/template2/fpo2_templ2.jpg','URL_for_two'],
            ['images/template2/fpo3_templ2.jpg','URL_for_three']
        ];
        //preload the images
        var oPics = [];
        for(i=0; i < picData.length; i++){
            oPics[i] = new Image();
            oPics[i].src = picData[i][0];
        }
        function swapImage(obj){
            oImgSwap.src = oPics[obj.indx].src;
            oImgSwap.parentNode.href = picData[obj.indx][1];
        }
        window.onload=function(){
            oImgSwap = document.getElementById('imgSwap');
            oLinks = document.getElementById('radiobs').getElementsByTagName('a');
            for(i=0; i < oLinks.length; i++){
                oLinks[i].indx = i;
                oLinks[i].onclick=function(){
                    swapImage(this);
                    return false;
                }
            }
            swapImage(oLinks[0]);
        }
    </script>

	<script type="text/javascript">
        var picDatab = [
            ['images/template2/fpo1_templ2b.jpg','URL_for_one'],
            ['images/template2/fpo2_templ2b.jpg','URL_for_two'],
            ['images/template2/fpo3_templ2b.jpg','URL_for_three']
        ];
        //preload the images
        var oPicsb = [];
        for(i=0; i < picDatab.length; i++){
            oPicsb[i] = new Image();
            oPicsb[i].src = picDatab[i][0];
        }
        function swapImageb(obj){
            oImgSwapb.src = oPicsb[obj.indx].src;
            oImgSwapb.parentNode.href = picDatab[obj.indx][1];
        }
        window.onload=function(){
            oImgSwapb = document.getElementById('imgSwapb');
            oLinksb = document.getElementById('radiobsb').getElementsByTagName('a');
            for(i=0; i < oLinksb.length; i++){
                oLinksb[i].indx = i;
                oLinksb[i].onclick=function(){
                    swapImageb(this);
                    return false;
                }
            }
            swapImageb(oLinksb[0]);
        }
    </script>

	</head>

<div class="graphics_templ2" style="padding-left:217px;">

<div class="selections">
	<div>
        <a href="">
            <img src="" id="imgSwap" alt="" />
        </a>
    </div>
		<div id="radiobs">
			<div class="single_box">
			<a href="#"><img src="/images/template2/sample_box_1_fpo.jpg" width="30" height="30" alt="Sample Box Fpo"></a>
		<h2>Color 1</h2>
		</div>
		
		<div class="single_box">
			<a href="#"><img src="/images/template2/sample_box_2_fpo.jpg" width="30" height="30" alt="Sample Box Fpo"></a>
		<h2>Color 1</h2>
		</div>
		
		<div class="single_box">
			<a href="#"><img src="/images/template2/sample_box_3_fpo.jpg" width="30" height="30" alt="Sample Box Fpo"></a>
		<h2>Color 1</h2>
		</div>
		</div>
</div>
</div>

	<div class="graphics_templ2" style="padding-left:15px;">

<div class="selections">
	<div>
        <a href="">
            <img src="" id="imgSwapb" alt="" />
        </a>
    </div>
		<div id="radiobsb">
			<div class="single_box">
			<a href="#"><img src="/images/template2/sample_box_1_fpob.jpg" width="30" height="30" alt="Sample Box Fpo"></a>
		<h2>Color 1</h2>
		</div>
		
		<div class="single_box">
			<a href="#"><img src="/images/template2/sample_box_2_fpob.jpg" width="30" height="30" alt="Sample Box Fpo"></a>
		<h2>Color 1</h2>
		</div>
		
		<div class="single_box">
			<a href="#"><img src="/images/template2/sample_box_3_fpob.jpg" width="30" height="30" alt="Sample Box Fpo"></a>
		<h2>Color 1</h2>
		</div>
		</div>
</div>
</div>

What I'm trying to get are the tag ids separately after I call the callback function. I've been racking my brain for far too long on this one. Here is a shorter version of what I have. I'm using the array's length to count and break into their own lines.

How do i get all 9 id="hover_[index]" separately using my array length?

PHP Code:
var info = Array("bla_1", "bla_2", "bla_3", "bla_4", "bla_5", "bla_6", "bla_7", "bla_8", "bla_9");

function callback(results, status) {
    if (status == myStatus) {
        for (var i = 0; i < results.length; i++) {
            send(results[i]);
        }
    }
} 
function send(info) {    
    document.getElementById('results').innerHTML += "<div id='hover_"+info.length+"'>Something</div>";
    hover_target = document.getElementById('hover_'+info.length);// how do i get all 9 hover_[index] separately?
    someEvent.addDomListener(hover_target, 'mouseover', function() {
        // do something
    });
} 


Thank you so much in advance,
Frank

Dear Great Coders,

I am having some trouble to get the id of the parent of a document which is iframe1 here. As you can see it the <javascript> is residing in the javascript section. Do mind giving me some ideas?

Yes, I know. I can insert the javascript on the top, but believe me i cant for some purpose because I am intergrating many other codes into it.

<html>
<iframe id="iframe1">
<html>
<head>
<javascript>
</head>
<body>
</body>
</html>
</iframe>

</html>

What is an alternative to document.write?
I know I could use <p> in html </p>
I would like to use JS though.
I hope you can understand my question.

I am 14yo and this is not for homework.
I just wanna try and learn JS.

I read document.write can cause me problems.
But all I ever see is:
<script type="text/javascript">

document.write("any words");

</script>

what alternate could I use?

Hi,

I need to open a PDF file via a web page.

Basically, I want to have a textbox where I type in a filename and then click submit and it will open that document.

For example, I need to open a PDF document...

I need to have a text box where I can input "test1" for example, click "GO" and it will add the "C:/test/" + textbox value + ".pdf" and open it in the browser.

I could do it in PHP but this is going to run on a local machine with no serverside so I assume JS will be the way forward.

Any ideas?

Many Thanks

MJFCAD