8 Replies - 1019 Views - Last Post: 30 November 2010 - 09:13 AM

#1 ipushmycar   User is offline

  • D.I.C Regular

Reputation: 86
  • View blog
  • Posts: 390
  • Joined: 29-August 10

Not a function?

Posted 29 November 2010 - 11:31 AM

As my states change in my display function my pictures do not.

Any ideas why?

Thanks,
Ipush

<html>    
<head>
    <script language="Javascript">
        <!-- hide script from uneducated browsers    
        var Pest;
        var reflectPic = new Image();
        var angryPic = new Image();
        var exercisingPic = new Image();
        var countPic = new Image();
        var crazyPic = new Image();
        
        reflectPic.src = "reflecting.png";
        angryPic.src = "angry.jpeg";
        exercisingPic.src = "exercising.jpeg";
        countPic.src = "count.png";
        crazyPic.src = "crazy.jpeg";
        
        function createPest(petState,petAction,petResponse,image,counter)
        {
            this.state = petState;
            this.response = petResponse;
            this.action= petAction;
            this.image = image;
            this.counter = counter;
        }
        
        function init()
        {
            Pest = new createPest("Reflecting on Choices","Upset","Why did I do those things...","reflectPic",0)
            display(Pest)
            setTimeout("run(Pest)",1000)

        }
        function display(pest)
        {
            var state = pest.state;
            var pestImage = new Image();
            
            if(state == "Reflecting on Choices")
            {
                pest.action = "Crying";
                pest.response = "Why did I do those things...";
                pest.image = "reflectingPic";
            }
            else if(state == "Angry")
            {
                pest.action = "Pushes you away!";
                pest.response = "LEAVE ME ALONE!";
                pest.image = "angryPic";
            }
            else if(state == "Going Crazy")
            {
                pest.action = "Grabs your arms";
                pest.response = "Who am I?! Where am I?!";
                pest.image = "crazyPic";
            }
            else if(state == "Exercising")
            {
                pest.action = "Running";
                pest.response = "Got to stay fit!";
                pest.image = "exercisingPic";
            }
            else if(state == "Counting the Days")
            {
                pest.action = "1..2..3..4..";
                pest.response = "How much longer am I trapped her?!";
                pest.image = "countPic";
            }
            else
            {
                pest.action = "Failed state";
                pest.response = "Unknow state.";
            }
            
            document.getElementById("pestAction").value = pest.action;
            document.getElementById("pestResponse").value = pest.response;
            document.pestImage.src = pest.image.src
            document.getElementById("counter").value = pest.counter;
        }
        
        function run(pest)
        {
            pest.counter++
            var state = pest.state;
            var ranNum = Math.random();
            
            if(state == "Reflecting on Choices" && ranNum < .2)
                pest.state = "Angry";
            else if(state == "Exercising" && ranNum < .2)
                pest.state = "Counting the Days";            
            else if(state == "Counting the Days" && ranNum < .5)
                pest.state = "Going Crazy";
            
            display(pest);
            
            setTimeout("run(Pest)",1000)
        }
        
        function giveMail(pest)
        {
            var state = pest.state;
            
            if(state == "Angry" || state == "Exercising")
                pest.state = "Reflecting on Choices";    
            
            display(pest);
        }
        
		function visitJail(pest)
		{
			var state = pest.state;
			if(state == "Angry")
				pest.state = "Going Crazy";
			else if(state == "Going Crazy")
				pest.state = "Exercising";
			
			display(pest);
		}	     
        //End hiding -->
    </script>
    </head>
    <center><img src="reflecting.png" name = "pestImage" width=\"200\" height=\"200\"></center>
    <body onload ="init();" bgcolor = "gray">            
        <form name="pestForm">
            <p ALIGN="center"><b><font FACE="Georgia, Times New Roman, Times, serif">Your pest is:</font></b>
                <input type="text" name="pestAction" id ="pestAction" VALUE="Upset" size=35 />
            </p>
            <p ALIGN="center"><b><font FACE="Georgia, Times New Roman, Times, serif">Pest's Response:</font></b>
                <input type="text" name="pestResponse" id="pestResponse" VALUE="Why did I do those things?" size=35 />
            </p>
            <p ALIGN="center">
            <input type="button" name="visit" id="visit" VALUE="Visit the prisoner." onclick="visitJail(Pest)"/>
            <input type="button" name="sendMail" id ="sendMail"  VALUE="Send mail to the prisoner." onclick="giveMail(Pest)" />
            </p>
            <p>
            <p ALIGN="center"><b><font FACE="Georgia, Times New Roman, Times, serif">Counter:</font></b>
            <input type="text" name="counter" id="counter" VALUE="" size=30 />
            </p>
        </form>
    </body>
</html>

This post has been edited by ipushmycar: 29 November 2010 - 12:44 PM


Is This A Good Question/Topic? 0
  • +

Replies To: Not a function?

#2 Atli   User is offline

  • Enhance Your Calm
  • member icon

Reputation: 4241
  • View blog
  • Posts: 7,216
  • Joined: 08-June 10

Re: Not a function?

Posted 29 November 2010 - 12:42 PM

The problem with the visit function is that the element who's onclick event you are calling it has the name and id "visit". So from within the attribute, the identifier "visit" refers to the element, not the function. - You need to either rename the function or change the name and id of the element.

As to your non-changing pictures. Line #77 would be the problem. The pest.image property is a string. It has no src property of it's own. - Just drop the .src from pest.image.src and it should work.
Was This Post Helpful? 1
  • +
  • -

#3 ipushmycar   User is offline

  • D.I.C Regular

Reputation: 86
  • View blog
  • Posts: 390
  • Joined: 29-August 10

Re: Not a function?

Posted 29 November 2010 - 01:01 PM

View PostAtli, on 29 November 2010 - 11:42 AM, said:

The problem with the visit function is that the element who's onclick event you are calling it has the name and id "visit". So from within the attribute, the identifier "visit" refers to the element, not the function. - You need to either rename the function or change the name and id of the element.

As to your non-changing pictures. Line #77 would be the problem. The pest.image property is a string. It has no src property of it's own. - Just drop the .src from pest.image.src and it should work.

I fixed the method but the pictures still don't work. Is that what you meant?

<html>	
<head>
	<script language="Javascript">
		<!-- hide script from uneducated browsers	
		var Pest;
		var reflectPic = new Image();
		var angryPic = new Image();
		var exercisingPic = new Image();
		var countPic = new Image();
		var crazyPic = new Image();
		
		reflectPic.src = "reflecting.png";
		angryPic.src = "angry.jpeg";
		exercisingPic.src = "exercising.jpeg";
		countPic.src = "count.png";
		crazyPic.src = "crazy.jpeg";
		
		function createPest(petState,petAction,petResponse,image,counter)
		{
			this.state = petState;
			this.response = petResponse;
			this.action= petAction;
			this.image = image;
			this.counter = counter;
		}
		
		function init()
		{
			Pest = new createPest("Reflecting on Choices","Upset","Why did I do those things...","reflectPic",0)
			display(Pest)
			setTimeout("run(Pest)",1000)

		}
		function display(pest)
		{
			var state = pest.state;
			
			if(state == "Reflecting on Choices")
			{
				pest.action = "Crying";
				pest.response = "Why did I do those things...";
				pest.image = "reflectingPic";
			}
			else if(state == "Angry")
			{
				pest.action = "Pushes you away!";
				pest.response = "LEAVE ME ALONE!";
				pest.image = "angryPic";
			}
			else if(state == "Going Crazy")
			{
				pest.action = "Grabs your arms";
				pest.response = "Who am I?! Where am I?!";
				pest.image = "crazyPic";
			}
			else if(state == "Exercising")
			{
				pest.action = "Running";
				pest.response = "Got to stay fit!";
				pest.image = "exercisingPic";
			}
			else if(state == "Counting the Days")
			{
				pest.action = "1..2..3..4..";
				pest.response = "How much longer am I trapped her?!";
				pest.image = "countPic";
			}
			else
			{
				pest.action = "Failed state";
				pest.response = "Unknow state.";
			}
			
			document.getElementById("pestAction").value = pest.action;
			document.getElementById("pestResponse").value = pest.response;
			document.pestImage.src = pest.image
			document.getElementById("counter").value = pest.counter;
		}
		
		function run(pest)
		{
			pest.counter++
			var state = pest.state;
			var ranNum = Math.random();
			
			if(state == "Reflecting on Choices" && ranNum < .2)
				pest.state = "Angry";
			else if(state == "Exercising" && ranNum < .2)
				pest.state = "Counting the Days";			
			else if(state == "Counting the Days" && ranNum < .5)
				pest.state = "Going Crazy";
			
			display(pest);
			
			setTimeout("run(Pest)",1000)
		}
		
		function giveMail(pest)
		{
			var state = pest.state;
			
			if(state == "Angry" || state == "Exercising")
				pest.state = "Reflecting on Choices";	
			
			display(pest);
		}
		
		function visitJail(pest)
		{
			var state = pest.state;
			if(state == "Angry")
				pest.state = "Going Crazy";
			else if(state == "Going Crazy")
				pest.state = "Exercising";
			display(pest);
		}	
		//End hiding -->
	</script>
	<script language="javascript" type="text/javascript">
	 function playSound(soundfile) 
	 {
	 document.getElementById("sound").innerHTML=
	 "<embed src=\""+soundfile+"\" hidden=\"true\" autostart=\"true\" loop=\"false\" />";
	 }
	</script>
	</head>
	<center><img src="reflecting.png" name = "pestImage" width=\"200\" height=\"200\"></center>
	<body onload ="init();" bgcolor = "gray">		
		<span id="sound"></span>
		<form name="pestForm">
			<p ALIGN="center"><b><font FACE="Georgia, Times New Roman, Times, serif">Your pest is:</font></b>
				<input type="text" name="pestAction" id ="pestAction" VALUE="Upset" size=35 />
			</p>
			<p ALIGN="center"><b><font FACE="Georgia, Times New Roman, Times, serif">Pest's Response:</font></b>
				<input type="text" name="pestResponse" id="pestResponse" VALUE="Why did I do those things?" size=35 />
			</p>
			<p ALIGN="center">
			<input type="button" name="visit" id="visit" onmouseover = "playSound('http://www.pacdv.com/sounds/ambience_sounds/party_crowd_1.wav')" VALUE="Visit the prisoner." onclick="visitJail(Pest)" />
			<input type="button" name="sendMail" id ="sendMail" onmouseover = "playSound('http://www.pacdv.com/sounds/people_sound_effects/applause-2.wav')" VALUE="Send mail to the prisoner." onclick="giveMail(Pest)" />
			</p>
			<p>
			<p ALIGN="center"><b><font FACE="Georgia, Times New Roman, Times, serif">Counter:</font></b>
			<input type="text" name="counter" id="counter" VALUE="" size=30 />
			</p>
		</form>
	</body>
</html>

Was This Post Helpful? 0
  • +
  • -

#4 Atli   User is offline

  • Enhance Your Calm
  • member icon

Reputation: 4241
  • View blog
  • Posts: 7,216
  • Joined: 08-June 10

Re: Not a function?

Posted 29 November 2010 - 02:31 PM

Yep that's what I mean.

Two things to consider though.

First, not all servers allow you to omit the extensions on files. The image's "src" attribute should specify the full name of the image you are trying to load, including the extension.

Also, your markup for the <img> tag includes back-slashes around the width and height attributes. They shouldn't be there.
Was This Post Helpful? 0
  • +
  • -

#5 ipushmycar   User is offline

  • D.I.C Regular

Reputation: 86
  • View blog
  • Posts: 390
  • Joined: 29-August 10

Re: Not a function?

Posted 29 November 2010 - 03:09 PM

View PostAtli, on 29 November 2010 - 01:31 PM, said:

Yep that's what I mean.

Two things to consider though.

First, not all servers allow you to omit the extensions on files. The image's "src" attribute should specify the full name of the image you are trying to load, including the extension.

Also, your markup for the <img> tag includes back-slashes around the width and height attributes. They shouldn't be there.


The original picture shows up but it just never changes.
Was This Post Helpful? 0
  • +
  • -

#6 ipushmycar   User is offline

  • D.I.C Regular

Reputation: 86
  • View blog
  • Posts: 390
  • Joined: 29-August 10

Re: Not a function?

Posted 29 November 2010 - 03:23 PM

I tried this and it still doesn't work.

<html>    
<head>
    <script language="Javascript">
        <!-- hide script from uneducated browsers    
        var Pest;
        var reflectPic = new Image();
        var angryPic = new Image();
        var exercisingPic = new Image();
        var countPic = new Image();
        var crazyPic = new Image();
        
        reflectPic.src = "reflecting.png";
        angryPic.src = "angry.jpeg";
        exercisingPic.src = "exercising.jpeg";
        countPic.src = "count.png";
        crazyPic.src = "crazy.jpeg";
        
        function createPest(petState,petAction,petResponse,counter)
        {
            this.state = petState;
            this.response = petResponse;
            this.action= petAction;
            this.counter = counter;
        }
        
        function init()
        {
            Pest = new createPest("Reflecting on Choices","Upset","Why did I do those things...",0)
            display(Pest)
            setTimeout("run(Pest)",1000)

        }
        function display(pest)
        {
            var state = pest.state;
            
            if(state == "Reflecting on Choices")
            {
                pest.action = "Crying";
                pest.response = "Why did I do those things...";
                document.getElementById("pestImage").src = reflectPic.src;
            }
            else if(state == "Angry")
            {
                pest.action = "Pushes you away!";
                pest.response = "LEAVE ME ALONE!";
                document.getElementById("pestImage").src = angryPic.src;
            }
            else if(state == "Going Crazy")
            {
                pest.action = "Grabs your arms";
                pest.response = "Who am I?! Where am I?!";
                document.getElementById("pestImage").src = crazyPic.src;
    
            }
            else if(state == "Exercising")
            {
                pest.action = "Running";
                pest.response = "Got to stay fit!";
                document.getElementById("pestImage").src = exercisingPic.src;

            }
            else if(state == "Counting the Days")
            {
                pest.action = "1..2..3..4..";
                pest.response = "How much longer am I trapped her?!";
                document.getElementById("pestImage").src = countPic.src;

            }
            else
            {
                pest.action = "Failed state";
                pest.response = "Unknow state.";
            }
            
            document.getElementById("pestAction").value = pest.action;
            document.getElementById("pestResponse").value = pest.response;
            document.getElementById("counter").value = pest.counter;
        }
        
        function run(pest)
        {
            pest.counter++
            var state = pest.state;
            var ranNum = Math.random();
            
            if(state == "Reflecting on Choices" && ranNum < .2)
                pest.state = "Angry";
            else if(state == "Exercising" && ranNum < .2)
                pest.state = "Counting the Days";            
            else if(state == "Counting the Days" && ranNum < .5)
                pest.state = "Going Crazy";
            
            display(pest);
            
            setTimeout("run(Pest)",1000)
        }
        
        function giveMail(pest)
        {
            var state = pest.state;
            
            if(state == "Angry" || state == "Exercising")
                pest.state = "Reflecting on Choices";    
            
            display(pest);
        }
        
        function visitJail(pest)
        {
            var state = pest.state;
            if(state == "Angry")
                pest.state = "Going Crazy";
            else if(state == "Going Crazy")
                pest.state = "Exercising";
            display(pest);
        }    
        //End hiding -->
    </script>
    <script language="javascript" type="text/javascript">
     function playSound(soundfile) 
     {
     document.getElementById("sound").innerHTML=
     "<embed src=\""+soundfile+"\" hidden=\"true\" autostart=\"true\" loop=\"false\" />";
     }
    </script>
    </head>
    <center><img src="reflecting.png" name = "pestImage" id = "pestImage" width="200" height="200"></center>
    <body onload ="init();" bgcolor = "gray">        
        <span id="sound"></span>
        <form name="pestForm">
            <p ALIGN="center"><b><font FACE="Georgia, Times New Roman, Times, serif">Your pest is:</font></b>
                <input type="text" name="pestAction" id ="pestAction" VALUE="Upset" size=35 />
            </p>
            <p ALIGN="center"><b><font FACE="Georgia, Times New Roman, Times, serif">Pest's Response:</font></b>
                <input type="text" name="pestResponse" id="pestResponse" VALUE="Why did I do those things?" size=35 />
            </p>
            <p ALIGN="center">
            <input type="button" name="visit" id="visit" onmouseover = "playSound('http://www.pacdv.com/sounds/ambience_sounds/party_crowd_1.wav')" VALUE="Visit the prisoner." onclick="visitJail(Pest)" />
            <input type="button" name="sendMail" id ="sendMail" onmouseover = "playSound('http://www.pacdv.com/sounds/people_sound_effects/applause-2.wav')" VALUE="Send mail to the prisoner." onclick="giveMail(Pest)" />
            </p>
            <p>
            <p ALIGN="center"><b><font FACE="Georgia, Times New Roman, Times, serif">Counter:</font></b>
            <input type="text" name="counter" id="counter" VALUE="" size=30 />
            </p>
        </form>
    </body>
</html>

Was This Post Helpful? 0
  • +
  • -

#7 Atli   User is offline

  • Enhance Your Calm
  • member icon

Reputation: 4241
  • View blog
  • Posts: 7,216
  • Joined: 08-June 10

Re: Not a function?

Posted 29 November 2010 - 04:02 PM

What you posted works in Firefox. The src of the image changes, at least.

Could it be that the URL is incorrect?
Where exactly are the images?
As it is in your code, the images would have to be sitting in the same directory the HTML file is in.


You are makings this a bit bloated though. There really isn't any need to create new Image objects. You only need to change the src of the image already in the DOM.
var img1 = 'first.jpeg';
var img2 = 'second.jpeg';

var theimage = document.getElementById('theimage');

if(soemething) {
    theimage.src = img1;
}
else {
    theimage.src = img2;
}


This would be enough.
Was This Post Helpful? 0
  • +
  • -

#8 ipushmycar   User is offline

  • D.I.C Regular

Reputation: 86
  • View blog
  • Posts: 390
  • Joined: 29-August 10

Re: Not a function?

Posted 29 November 2010 - 06:40 PM

View PostAtli, on 29 November 2010 - 03:02 PM, said:

What you posted works in Firefox. The src of the image changes, at least.

Could it be that the URL is incorrect?
Where exactly are the images?
As it is in your code, the images would have to be sitting in the same directory the HTML file is in.


You are makings this a bit bloated though. There really isn't any need to create new Image objects. You only need to change the src of the image already in the DOM.
var img1 = 'first.jpeg';
var img2 = 'second.jpeg';

var theimage = document.getElementById('theimage');

if(soemething) {
    theimage.src = img1;
}
else {
    theimage.src = img2;
}


This would be enough.


I like to preload the images and yes all my pictures are in the same folder (directory) also I am not using links. However, mine don't change still and I am using firefox?

This post has been edited by ipushmycar: 29 November 2010 - 06:41 PM

Was This Post Helpful? 0
  • +
  • -

#9 ipushmycar   User is offline

  • D.I.C Regular

Reputation: 86
  • View blog
  • Posts: 390
  • Joined: 29-August 10

Re: Not a function?

Posted 30 November 2010 - 09:13 AM

I got it to work... my stupid self put .jpeg instead of .jpg. Haha, went to bed woke up and saw it.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1