Function is undefined

JavaScript
1

I have this image

<img id="dynamic-image1" src="images/zero.gif" onclick="flipImage1()">

I’m trying to get it to switch images (possibly up to 5)
using this

    function flipImage1() {

    var image1 = document.getElementById('dynamic-image1').src;
    var first = document.getElementById('number_one').value;	
    
    if (first == "1") 
	image1 = images[0];
    else if (first == "2") 
	image1 = images[1];
    else if (first == "3") 
	image1 = images[2];
    else if (first == "4") 
	image1 = images[3];
    else 
	image1 = images[4];
	
    }

But when I click the image, i get

1920×1080 54.4 KB

I placed all my functions before the closing body tag though.

2

It doesn’t look like you have included your script correctly.

3

ok, well heres what I did. I placed the at the end of the page

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
        <title>Assignment #4</title>
    <link rel="stylesheet" type="text/css" href="css/style.css">
 </head>
 <body>
  <span>
    <img id="dynamic-image1" src="images/zero.gif" onclick="flipImage1()"> umber (1-5)">
  </span><span>
    <img id="dynamic-image2" src="images/zero.gif" alt="">
    <input type="text"  id="number_two" placeholder="Please Enter a Number (1-5)">
 </span>
<script>
...
</script>
</body>
</html>

I thought that was the way to set it up

4

[quote=“lukeurtnowski, post:3, topic:223519, full:true”]
ok, well heres what I did. I placed the at the end of the page[/quote]

That’s good with the placement of the script

I see a problem relating to this line:

var first = document.getElementById('number_one').value;

Also, the image1 variable will just contain a text string. You will need to assign the actual element itself instead, then change the src property of that element if you want to achieve anything effective.

Good luck with your assignment.

5

oh, the array is

var images = [];
	images.push("images/one.gif");
	images.push("images/two.gif");
	images.push("images/three.gif");
	images.push("images/four.gif");
	images.push("images/five.gif");

(the src of the images)
I thought

var first = document.getElementById('number_one').value;

would save the data put into the text box into a variable?

6

You need to take another look at the id on your text box.

With the images, what do you think JavaScript assigns to the image1 variable?

var image1 = document.getElementById('dynamic-image1').src;
7

Doesn’t my text box have the same id as the first variable?

<input type="text"  id="number_one" placeholder="Please Enter a Number (1-5)">

Wouldn’t the first variable hold whatever was input into it (value)
well since im trying to target the src of the image, wouldn’t the image1 variable find that element and look up its src,

8

[quote=“lukeurtnowski, post:7, topic:223519, full:true”]
Doesn’t my text box have the same id as the first variable?[/quote]

Aha! The code you just now posted differs from what you had in post #3, where it had an id of “number_two”. That explains all.

Yes it does, so the image1 variable will contain a string, won’t it.

When you change that string, JavaScript doesn’t know that you want the src property of the image to be changed, does it.

Instead, you have to assign the image element itself to a variable, so that you can tell JavaScript that you want the src property of that element to be changed.

9

sorry about the mix up of ids, i get messed up at times.

so is this better then

function flipImage1() {

var image1 = document.getElementById('dynamic-image1');
var first = document.getElementById('number_one');	

if (first == "1") 
image1.src = images[0];
else if (first == "2") 
image.src1 = images[1];
else if (first == "3") 
image1.src = images[2];
else if (first == "4") 
image1.src = images[3];
else 
image1.src = images[4];

}

and when I do the compare thing, do I use first.value?

10

As you are only reading from that input box (not writing to, or changing it), the .value property will do swell. However, it can be better to keep it as a reference to the element, which can help other code to make more sense.

It could be improved, such as:

var index = parseInt(first.value, 10) - 1;
if (images[index]) {
    image1.src = images[index];
}

But what you have there should do the job.

11

k, changed the function to

function flipImage1() {

var image1 = document.getElementById('dynamic-image1');
var first = document.getElementById('number_one');	

if (first.value == "1") 
image1.src = images[0];
else if (first.value == "2") 
image.src = images[1];
else if (first.value == "3") 
image1.src = images[2];
else if (first.value == "4") 
image1.src = images[3];
else 
image1.src = images[4];	
}

and when i enter a # into the box (2) and click the image…i still get flipImage() is undefined
I dont think I should do the index thing, the assignment want us to use an if/else statement

12

Part the first.

Part the second.

Do you see a difference between the two parts?

13

Oh good!

if (images[index]) {
    image1.src = images[index];
} else {
    image1.src = images[0]; // default on bad entry
}

Just having fun.

14

I just chedcked the console, heres the error…/.

flipImage1 is not defined

It says the error is on line 10 though
Heres line 10

 <img id="dynamic-image1" src="images/zero.gif" onclick="flipImage1()">
15

Please post the full code that you are using (the combined HTML and JavaScript), so that we may effectively troubleshoot it?

16

ok din’t want to overwhelm you

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
        <title>Assignment #4</title>
    <link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<span>
    <img id="dynamic-image1" src="images/zero.gif" onclick="flipImage1()">
    <input type="text"  id="number_one" placeholder="Please Enter a Number (1-5)">
</span><span>
    <img id="dynamic-image2" src="images/zero.gif" onclick="flipImage2()">
    <input type="text"  id="number_two" placeholder="Please Enter a Number (1-5)">
</span>
<script>
(function() {
'use strict';
	var images = [];
	images.push("images/one.gif");
	images.push("images/two.gif");
	images.push("images/three.gif");
	images.push("images/four.gif");
	images.push("images/five.gif");
	
	document.getElementById("dynamic-image2").onclick = function(){
		 flipImage2(this.src);
	}

document.getElementById('number_one').onblur=function(){
checkInput(this.value);
  }
document.getElementById('number_two').onblur=function(){
checkInput(this.value);
}
function checkInput(value) {	 
value = Number(value);
if(isNaN(value) || (value > 5 || value < 1)){
alert('Enter a number between 1 & 5');
}
}
function flipImage1() {

var image1 = document.getElementById('dynamic-image1');
var first = document.getElementById('number_one');	

if (first.value == "1") 
image1.src = images[0];
else if (first.value == "2") 
image.src = images[1];
else if (first.value == "3") 
image1.src = images[2];
else if (first.value == "4") 
image1.src = images[3];
else 
image1.src = images[4];

}
function flipImage2() {

switch(second) {

case 1: 
image2 = images[0];
break;
case 2: 
image2 = images[1];
break;
case 3: 
image2 = images[2];
break;
case 4: 
image2 = images[3];
break;
default: 
image2 = images[4];
break;

}
}
	
}());
</script>
</body>
</html>

thats the whole thing, lemme know if It seems ok on your end. Also =I have to compare the if/else statement to a switch statement, so I kind of started none but it online at
http://fixmysite.us/Web_Programming_With_Javascriipt/Assignment4/

17

Your code is contained inside of an IIFE, which prevents outside things from interacting with it, such as your onclick attribute.

A better solution is to remove the onclick attribute, and attach the onclick event from just before the end of your IIFE.

For example:

Remove the onclick attribute:

<img id="dynamic-image1" src="images/zero.gif">

and at the end of the IIFE, assign flipImage1 to the image’s onclick event:

(function () {
    ...
    document.getElementById('dynamic-image1').onclick = flipImage1;
}());
2 Likes
18

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.