How do I use function in another function


I’ve sent a picture via peer connection in chrome, I’ve a little problem with hiding an icon image and here’s my codes:

<img src='' id=notification onclick="viewImage();" />
<div id=view>
	<center>[name] sent you an image!</center>
	<img id=view_image><br>
	<button onclick="viewTheImage();">View</button>
	<button id=cancel>Cancel</button>

#view {
       display: none;
#view_image {


notification = document.getElementById('notification'),
notification.src = 'images/no_image.png';

function viewTheImage() {
	window.location = 'image.php?image_id=' +ID;

function canCel() { = 'none';

function createPeerConnection() {
	// my BlahBlahBlah code goes here

	function gotImage() {
		notification.src = 'images/got_image.png';

cancel = document.getElementById('cancel');
cancel.addEventListener('click', canCel, false);

Long code to give you the picture but I just want the notification image returned to ‘no_image.png’ when the user click ‘Cancel’.

How do I do this? I use this code and it’s not working:

function canCel() { = 'none';
	notification.src = 'images/no_image.png';


It seems to work for me on a test page that I created.

Can I see your test page that demonstrates the problem that you are having?

Thanks for response,

I’ll look into my codes again for why it’s not working. The problem I could feel is that it shows the incoming picture as long as the user stay connected through peer connection.