Member Avatar for new_developer

Hi everyone,
My javascript code is absolutely ok but its not working. I know it sounds funny but its happening with me.

Please view below code and tell me is there any mistake in it.


Javascript code:
Which change image when i click on button.

var myImages = new Array("images/ba1", "images/ba2", "images/ba3", "images/ba4", "images/ba5");

var i = 0;

function ChangeImage()
{
	i++;
	if(i == myImages.length)
	{
		i = 0;
	}
	
	document.getElementById("main").src = myImages[i]
}

Html code:
First div contains thumbnails. Second div contains large image of thumbnail. I want to change large image through javascript function.

<div>
<img src="images/a1.jpg" id="a1"/> -
<img src="images/a2.jpg" id="a2"/> -
<img src="images/a3.jpg" id="a3"/> -
<img src="images/a4.jpg" id="a4"/> -
<img src="images/a5.jpg" id="a5"/>
</div>

<input type="button" value="Next" onclick="ChangeImage()"/>

<div><img src="images/ba1.jpg" id="main"/></div>

Please anyone check my code and tell me whats the problem. It seems ok, but its not working. Images path is ok. I have to give assignment ...

  • 2 Contributors
  • 5 Replies
  • 295 Views
  • 22 Hours Discussion Span
  • Latest Post Latest Post by Javvy

Dani AI

Generated

A short expert note building on the thread from and : the problem is almost always a mismatch between what the script sets as an image source and what the server will actually serve (typos, wrong relative path, case differences, etc.), or else the script is running at the wrong time. Below are concrete debugging checks and a simple, robust pattern to swap the large image safely.

Quick debugging checklist

  • Open DevTools: look in Console for errors and in Network for the exact URL the browser requests when the button is clicked. A 404 there shows the precise path the script tried to load.
  • Paste that requested URL into the address bar to confirm the file exists and the path/case are correct.
  • Verify the DOM node and function exist before changing src: inspect document.getElementById('main') and log inside the click handler.
  • Ensure the script runs after the DOM (or attach handlers in DOMContentLoaded), and that element ids are unique.
  • Use onerror on the image to detect load failures and log the failing URL.

A modern, safe pattern (example)

const images = ['path/to/img-large-1.jpg','path/to/img-large-2.jpg','path/to/img-large-3.jpg'];
let idx = 0;
const main = document.getElementById('main');
const nextBtn = document.getElementById('nextBtn');

// preload
images.forEach(s => { const p = new Image(); p.src = s; });

nextBtn.addEventListener('click', () => {
  idx = (idx + 1) % images.length;
  main.src = images[idx];
});

main.onerror = () => { console.warn('Failed to load:', main.src); main.alt = 'Image unavailable'; };

Notes and best practices
Prefer setting an image element’s src rather than replacing innerHTML (the latter can remove listeners and hurt accessibility). Keep alt text, avoid inline handlers if possible, and use DevTools network traces to confirm the actual URL the browser requests — that will quickly reveal any remaining mismatch.

Member Avatar for Javvy

Maybe your myImages is missing the file extension?

Member Avatar for new_developer

Maybe your myImages is missing the file extension?

I didn't understand ...
What is the relation of myImages and file extension ??

Member Avatar for Javvy

Care to try this..?

<script>
var myImages = new Array("<img src='images/ba1.jpg'>", "<img src='images/ba2.jpg'>", "<img src='images/ba3.jpg'>", "<img src='images/ba4.jpg'>", "<img src='images/ba5.jpg'>");

var i = 0;

function ChangeImage()
{
	i++;
	if(i == myImages.length)
	{
		i = 0;
	}
	
	document.getElementById("main").innerHTML = myImages[i]
}
</script>

<div>
<img src="images/a1.jpg" id="a1"/> -
<img src="images/a2.jpg" id="a2"/> -
<img src="images/a3.jpg" id="a3"/> -
<img src="images/a4.jpg" id="a4"/> -
<img src="images/a5.jpg" id="a5"/>
</div>

<input type="button" value="Next" onclick="ChangeImage()"/>

<div id="main"><img src="images/ba1.jpg"></div>

Changes in line 2, 14 and 18.

Edited by Javvy because: n/a
Member Avatar for new_developer

thank u ...

Member Avatar for Javvy

You're welcome :)

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.