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

Sergio45 · October 24, 2016

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

Mr_KoKa · October 24, 2016

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.

PlutoNZL · October 24, 2016

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.

Sergio45 · October 24, 2016

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

PlutoNZL · October 24, 2016

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;
    }
}

Sergio45 · October 24, 2016

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

Mr_KoKa · October 24, 2016

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.

Sergio45 · October 24, 2016

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);
}

Mr_KoKa · October 24, 2016

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.

Sergio45 · October 24, 2016

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.

Sign In

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

Link to comment

Share on other sites

Link to post

Share on other sites

Link to comment

Share on other sites

Link to post

Share on other sites

Link to comment

Share on other sites

Link to post

Share on other sites

Link to comment

Share on other sites

Link to post

Share on other sites

Link to comment

Share on other sites

Link to post

Share on other sites

Link to comment

Share on other sites

Link to post

Share on other sites

Link to comment

Share on other sites

Link to post

Share on other sites

Link to comment

Share on other sites

Link to post

Share on other sites

Link to comment

Share on other sites

Link to post

Share on other sites

Link to comment

Share on other sites

Link to post

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Topics

Latest From Linus Tech Tips:

I had no idea SHEIN sold PC parts…

Latest From Tech Quickie:

What Are the Download Speeds in Space?

Latest From TechLinked:

Goodbye, TikTok

Latest From GameLinked:

Is Nintendo being FRAMED?

Latest From ShortCircuit:

I tried 20 influencer foods, here are the best… and the worst…

Latest From Mac Address:

Why did you buy an Apple Vision Pro?

Latest From Channel Super Fun:

I Swapped the CEO's Assistant For a Day!