Jump to content
Please Use CODE Tags

Help! JavaScript giving me an extra image when not needed.

Sergio45
By Sergio45
in Programming
 Share
Go to solution Solved by Mr_KoKa,

change

  

else
{
  unknown+=1;
}

to

  

else if(user !== "done")
{
  unknown+=1;
}

because withou t checking for done it will be still incrementing unknown when user is done.

 

and

  

if(user=="done")
{
  //n-=1;

  displayThemSpooks(witch,bat,ghost,unknown);
}

just to 

displayThemSpooks(witch,bat,ghost,unknown);

because out of that loop user is always equal done so tehre is no need to change check.

Posted

The issue that I am running into is, When the user enters "bat","witch","ghost", and an "unknown"(not a bat, ghost, or a witch). It keeps a counts and shows the image of a bat,ghost,witch,and an unknown x number of times that it was entered. The unknown image keeps showing up when the user types in either a ghost or bat or witch and even when the user types in "done" to stop the count. It shows an unknown was entered. Any help would be appreciated. There are 3 functions in the java Script , The problematic functions are (displaythemspooks, spooks,displaythemspookspic).

Thanks in Advanced!!! 

var $ = function(id) {return document.getElementById(id); }//end $

window.onload = function () 
{

	//Provide answer for Question 1 here
	document.getElementById("title").innerHTML = (" <h1> JavaScript Control Structures Test Document.</h1>");
	
	//////////////////////
	
	testQuestion2();
	testQuestion3();
	
}
////////////////////////////////////////////////////////
function oddOrEven(inputFromUser)//the input from the user
{
	document.writeln("<ul>");//start of the unorder list
	if(isNaN(inputFromUser)||inputFromUser==="")//if the input is not a number
	//or is blank
	{
		for(var counter=1; counter<=10; counter++)
		{
			if(counter % 2 == 0)//even
			{
				document.writeln("<li>"+ counter+ "Is Even.</li>");
			}
			else
			{
				document.writeln("<li>" + counter+ "Is Odd.</li>");
			}
		}
	}
	else
	{
		for(var counter=1;counter<=inputFromUser;counter++)
		{
			if(counter % 2 == 0)
			{
				document.writeln("<li>"+counter+"Is Even.</li>");
			}
			else
			{
				document.writeln("<li>"+counter+"Is Odd.</li>");
			}
		}
	}
	document.writeln("</ul>");//the end of the unorder list tag.
	//append child.element("</Ul>")???
}




function testQuestion2() //the function that works with the oddr even 
{
	var user=prompt("Enter a number,please.");//prompts the user to enter a number
	var inputFromUser=parseInt(user);//parses the input and adds it to input for the user
 
 
	oddOrEven(inputFromUser);//calls on the method and runs through the code.
	
	
	


}//end testQuestion2

////////////////////////////////////////////////
function testQuestion3()
{
	spooks();
}
///////////////////////////////////////////////

function spooks() 
{
	var unknown=0;
	var ghost=0;
	var witch=0;
	var bat = 0;
	var user;
	
	for (var n=0; n<1; n++)
	{
		if(user!=="done")
		{
			n-=1;
		
			user=prompt("bat,witch, or ghost").toLowerCase();
			
			if(user==="bat")
		{
				bat+=1;
		}
			else if(user==="ghost")
		{
				ghost+=1;
		}
			else if (user==="witch")
		{
				witch+=1;
		}
			else if(user!=="bat"||user!=="ghost"||user!=="witch")
		{
			unknown+=1;
		}
	
		}
	}
	
	displayThemSpooks(witch,bat,ghost,unknown);
	
}




function displayThemSpooks(witch,bat,ghost,unknown)
{
	if(witch >1)
	{
		document.writeln("<p> Witch was entered"+witch+ " \n </p>")
		displayThemSpookspic(witch,"witch");
	}
	else if(witch===0)
	{
		document.writeln("<p> No witches were spotted </p>");
	}
	else
	{
		document.writeln("<p> You entered"+witch+" witches</p>")
		displayThemSpookspic(witch,"witch");
	}
	
	if(bat >1)
	{
		document.writeln("<p> bat was entered"+bat+ " \n </p>")
		displayThemSpookspic(bat,"bat");
	}
	else if(bat===0)
	{
		document.writeln("<p> No bat were spotted</p>");
	}
	else
	{
		document.writeln("<p> You bat"+bat+" bat</p>")
		displayThemSpookspic(bat,"bat");
	}
	
	
	if(ghost >1)
	{
		document.writeln("<p> ghost was entered"+ghost+ " \n </p>")
		displayThemSpookspic(ghost,"ghost");
	}
	else if(ghost===0)
	{
		document.writeln("<p> No ghost were spotted </p>");
	}
	else
	{
		document.writeln("<p> You entered"+ghost+" ghost</p>")
		displayThemSpookspic(ghost,"ghost");
	}
	
	if(unknown >1)
	{
		document.writeln("<p> unknown was entered"+unknown+ " \n </p>")
		displayThemSpookspic(unknown,"unknown");
	}
	else if(unknown===0)
	{
		document.writeln("<p> No unknowns were spotted </p>");
	}
	else
	{
		document.writeln("<p> You entered"+unknown+" unknowns</p>")
		displayThemSpookspic(unknown,"unknown");
	}
	
}

function displayThemSpookspic(count,spookPic )
{
	for(var num=1;num<=count;num++ )
	{
		var tag="<img src='Images/" + spookPic + ".png' alt='spooky picture' heigt='40' width='40'>";
		document.write(tag);
		
	}
}
	
	

<!DOCTYPE html>
<html>

<head>	
	<meta charset="UTF-8">
	<meta name="author" content="Enter your name here">
	
	<title>Web Programming - Unit 8</title>
	<script type="text/javascript" src="javascript/basics.js">

		
	
	
	
	
	</script>
</head>

<body>
	<h1 id="title"> </h1>
<p></p>

	
	
</body>







</html>

 

Unit 9- Functions (1).zip

Link to post
Share on other sites
Posted

It is all about order of your prompt and check of value.

  

for (var n=0; n<1; n++)
{
  if(user!=="done") //You check before you enter "done"
  {
    n-=1;

    user=prompt("bat,witch, or ghost").toLowerCase(); // You enter "done" here

    if(user==="bat")
    {
      bat+=1;
    }
    else if(user==="ghost")
    {
      ghost+=1;
    }
    else if (user==="witch")
    {
      witch+=1;
    }
    else if(user!=="bat"||user!=="ghost"||user!=="witch") // "done" is not bat or a ghost or a witch, so it is unknown
    {
      alert('Inc unknown')
      unknown+=1;
    }

  }
  
  // Loop end there with user == "done" and the if will check it now, after unknown has been incremented.
}

Your loop construction is just wrong. you should not need to change n inside loop, if you do it means that you probably doing something wrong.

 

Instead of for loop and n -= 1 use do while, where the condition is user !== "done". (You still need to check for that inside before you will compare with bat, witch or ghost.

Link to post
Share on other sites
Posted

The problem is here: 

else if(user!=="bat"||user!=="ghost"||user!=="witch")
{
    unknown+=1;
}

Suppose the user enters "bat", the above condition evaluates to: 

false || true || true == true

EDIT: Actually, I don't think I'm correct because you are using an else-if. I'll take another look.

Link to post
Share on other sites
Posted
  • Author

I See what you mean, Let me do some adjustments and see if I can get it. Thanks again guys I keep you posted.

4 minutes ago, Mr_KoKa said:

It is all about order of your prompt and check of value.

  


for (var n=0; n<1; n++)
{
  if(user!=="done") //You check before you enter "done"
  {
    n-=1;

    user=prompt("bat,witch, or ghost").toLowerCase(); // You enter "done" here

    if(user==="bat")
    {
      bat+=1;
    }
    else if(user==="ghost")
    {
      ghost+=1;
    }
    else if (user==="witch")
    {
      witch+=1;
    }
    else if(user!=="bat"||user!=="ghost"||user!=="witch") // "done" is not bat or a ghost or a witch, so it is unknown
    {
      alert('Inc unknown')
      unknown+=1;
    }

  }
  
  // Loop end there with user == "done" and the if will check it now, after unknown has been incremented.
}

Your loop construction is just wrong. you should not need to change n inside loop, if you do it means that you probably doing something wrong.

 

Instead of for loop and n -= 1 use do while, where the condition is user !== "done". (You still need to check for that inside before you will compare with bat, witch or ghost.

 

4 minutes ago, PlutoNZL said:

The problem is here: 


else if(user!=="bat"||user!=="ghost"||user!=="witch")
{
    unknown+=1;
}

Suppose the user enters "bat", the above condition evaluates to: 


false || true || true == true

 

 

Link to post
Share on other sites
Posted
12 minutes ago, PlutoNZL said:

The problem is here: 


else if(user!=="bat"||user!=="ghost"||user!=="witch")
{
    unknown+=1;
}

Suppose the user enters "bat", the above condition evaluates to: 


false || true || true == true

EDIT: Actually, I don't think I'm correct because you are using an else-if. I'll take another look.

What I said above is true, but that condition won't even be executed when user == "bat" because you are using and else-if.

 

The reason you are getting 1 "unknown" is because "done" is considered an "unknown". Here's your code with comments: 

var user; // Right now user has no value.

if (user !== "done") { // User does not equal done
    n -= 1;
        
    user = prompt("bat,witch, or ghost").toLowerCase(); // Suppose "done" is entered. user is now equal to "done"
        
    if (user === "bat") {
        bat += 1;
    } else if (user === "ghost") {
        ghost += 1;
    } else if (user === "witch") {
        witch += 1;
    } else if (user !== "bat" || user !== "ghost" || user !== "witch") { // This condition evalutes to true because "done" is unknown.
        unknown += 1;
    }
}

 

Link to post
Share on other sites
Posted
  • Author

This is what I got so far.

Am I heading towards the right path?

Thanks

  

var $ = function(id) {return document.getElementById(id); }//end $

window.onload = function () 
{

	//Provide answer for Question 1 here
	document.getElementById("title").innerHTML = (" <h1> JavaScript Control Structures Test Document.</h1>");
	
	//////////////////////
	
	testQuestion2();
	testQuestion3();
	
}
////////////////////////////////////////////////////////
function oddOrEven(inputFromUser)//the input from the user
{
	document.writeln("<ul>");//start of the unorder list
	if(isNaN(inputFromUser)||inputFromUser==="")//if the input is not a number
	//or is blank
	{
		for(var counter=1; counter<=10; counter++)
		{
			if(counter % 2 == 0)//even
			{
				document.writeln("<li>"+ counter+ "Is Even.</li>");
			}
			else
			{
				document.writeln("<li>" + counter+ "Is Odd.</li>");
			}
		}
	}
	else
	{
		for(var counter=1;counter<=inputFromUser;counter++)
		{
			if(counter % 2 == 0)
			{
				document.writeln("<li>"+counter+"Is Even.</li>");
			}
			else
			{
				document.writeln("<li>"+counter+"Is Odd.</li>");
			}
		}
	}
	document.writeln("</ul>");//the end of the unorder list tag.
	//append child.element("</Ul>")???
}




function testQuestion2() //the function that works with the oddr even 
{
	var user=prompt("Enter a number,please.");//prompts the user to enter a number
	var inputFromUser=parseInt(user);//parses the input and adds it to input for the user
 
 
	oddOrEven(inputFromUser);//calls on the method and runs through the code.
	
	
	


}//end testQuestion2

////////////////////////////////////////////////
function testQuestion3()
{
	spooks();
}
///////////////////////////////////////////////

function spooks() 
{
	var unknown=0;
	var ghost=0;
	var witch=0;
	var bat = 0;
	var user;
	
	for (var n=0; n<1; n++)
	{
	//user=prompt("bat,witch, or ghost").toLowerCase();
			
		do {
				user=prompt("bat,witch, or ghost").toLowerCase();
			
			if(user==="bat")
		{
				bat+=1;
		}
			else if(user==="ghost")
		{
				ghost+=1;
		}
			else if (user==="witch")
		{
				witch+=1;
		}
			else
		{
			unknown+=1;
		}
	
		
		}
		while (user!=="done");
	
		
		if(user=="done")
		{
			//n-=1;
			
			displayThemSpooks(witch,bat,ghost,unknown);
		}
		
		//	displayThemSpooks(witch,bat,ghost,unknown);
}




function displayThemSpooks(witch,bat,ghost,unknown)
{
	if(witch >1)
	{
		document.writeln("<p> Witch was entered"+witch+ " \n </p>")
		displayThemSpookspic(witch,"witch");
	}
	else if(witch===0)
	{
		document.writeln("<p> No witches were spotted </p>");
	}
	else
	{
		document.writeln("<p> You entered"+witch+" witches</p>")
		displayThemSpookspic(witch,"witch");
	}
	
	if(bat >1)
	{
		document.writeln("<p> bat was entered"+bat+ " \n </p>")
		displayThemSpookspic(bat,"bat");
	}
	else if(bat===0)
	{
		document.writeln("<p> No bat were spotted</p>");
	}
	else
	{
		document.writeln("<p> You bat"+bat+" bat</p>")
		displayThemSpookspic(bat,"bat");
	}
	
	
	if(ghost >1)
	{
		document.writeln("<p> ghost was entered"+ghost+ " \n </p>")
		displayThemSpookspic(ghost,"ghost");
	}
	else if(ghost===0)
	{
		document.writeln("<p> No ghost were spotted </p>");
	}
	else
	{
		document.writeln("<p> You entered"+ghost+" ghost</p>")
		displayThemSpookspic(ghost,"ghost");
	}
	
	if(unknown >1)
	{
		document.writeln("<p> unknown was entered"+unknown+ " \n </p>")
		displayThemSpookspic(unknown,"unknown");
	}
	else if(unknown===0)
	{
		document.writeln("<p> No unknowns were spotted </p>");
	}
	else
	{
		document.writeln("<p> You entered"+unknown+" unknowns</p>")
		displayThemSpookspic(unknown,"unknown");
	}
	
}

function displayThemSpookspic(count,spookPic )
{
	for(var num=1;num<=count;num++ )
	{
		var tag="<img src='Images/" + spookPic + ".png' alt='spooky picture' heigt='40' width='40'>";
		document.write(tag);
		
	}
}
	
	

}

 

Unit 9- Functions (2).zip

Link to post
Share on other sites
Posted
  • Solution

change

  

else
{
  unknown+=1;
}

to

  

else if(user !== "done")
{
  unknown+=1;
}

because withou t checking for done it will be still incrementing unknown when user is done.

 

and

  

if(user=="done")
{
  //n-=1;

  displayThemSpooks(witch,bat,ghost,unknown);
}

just to 

displayThemSpooks(witch,bat,ghost,unknown);

because out of that loop user is always equal done so tehre is no need to change check.

Link to post
Share on other sites
Posted
  • Author

 

Mr_KoKa

Thanks again!

 

AND

PlutoNZL

Thank you also for the help!

 

_________________________________________________________

Here is the finish code for the function. If I ever get to meet you in person Mr_KoKa, I would shake your hand. You been a great help and you too PlutoNZL. 

___________________________________________________________ 

	for (var n=0; n<1; n++)
	{

			
		do {
				user=prompt("bat,ghost, or witch").toLowerCase();
			
			if(user==="bat")
		{
				bat+=1;
		}
			else if(user==="ghost")
		{
				ghost+=1;
		}
			else if (user==="witch")
		{
				witch+=1;
		}
			else if(user!=="done")
		{
			unknown+=1;
		}
	
		
		}
		while (user!=="done");
	
		displayThemSpooks(witch,bat,ghost,unknown);
}

 

Link to post
Share on other sites
Posted
  • Author
1 minute ago, Mr_KoKa said:

You don't need that for loop, it just goes once, from n = 0 to n = 1 because of condition n < 1, so you can omit it and it won't change anything. No problem.

I did commented out the for loop starter.

 

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing Programming

×