Jump to content
Please Use CODE Tags

Help with incorrect code

kurtstir
 Share
Posted

Hello,

I have recently started coding html script. I was wondering if anyone could help me figure out what part of this code is incorrect!

The code is as follows and when opened in chrome has the word hello with three button options for changing the color.

 

<DOCTYPE html>
<html>
<head>
<title>js test</title>
<script>
funtction changeColor(color) {
var element = document.getElementbyId("creed");
element.style.color = color; 
};
var intervalId;
function colorStrobe() {
intervalId = setInterval(strober(), 250);
};
function strober() {
var element = document.getElementbyId("creed");
if (element.style.color == 'red') {
element.style.color = 'blue';
} else {
element.style.color = 'red';
}
};
function stopTheStrobe() {
clearInterval(intervalId);
};
</script>
</head>
<body>
<h1 id="creed"> HELLO </h1>
<button onclick="changeColor('blue')">BLUE-IFY</button>
<button onclick="changeColor('red')">RED-IFY</button>
<button onclick="colorStrobe()">STROBE-IFY</button>
</body>
</html>
 
Please help me with this!!!

js.html

IM BACK BABY

Link to comment
Share on other sites
Link to post
Share on other sites
Posted

You misspelled "function" and "getElementById"

And you also forgot the '!' before DOCTYPE.

1474412270.2748842

Link to comment
Share on other sites
Link to post
Share on other sites
Posted

this:

intervalId = setInterval(strober(), 250);

should be:

intervalId = setInterval(strober, 250);

The way you wrote it calls whatever was returned by strober() and not the function 'strober'.

I remain,  

msevilgenius

Link to comment
Share on other sites
Link to post
Share on other sites
Posted 
<!DOCTYPE html><html><head><title>js test</title><script>	function changeColor(color) {		var element = document.getElementById("creed");		element.style.color = color; 	}		var intervalId;	function colorStrobe() {		intervalId = setInterval(strober, 250);	}		function strober() {		var element = document.getElementById("creed");		if (element.style.color == 'red') {			element.style.color = 'blue';		} else {			element.style.color = 'red';		}	}		function stopTheStrobe() {		clearInterval(intervalId);	}	</script></head><body><h1 id="creed"> HELLO </h1><button onclick="changeColor('blue')">BLUE-IFY</button><button onclick="changeColor('red')">RED-IFY</button><button onclick="colorStrobe()">STROBE-IFY</button></body></html>

In addition to the two above, you misspelled getElementbyID

var element = document.getElementbyId("creed");

should be

var element = document.getElementById("creed");

 

the "B" in ById needs to be capitalized. You also need to figure out a way to call your stopTheStrobe() function.

Link to comment
Share on other sites
Link to post
Share on other sites
Posted

Browser console.

Browser Javascript debugger.

jshint.com

 

Useful tools. Keep them at hand while coding.

Audio Reference • Cutting the Crap • 7.1 Headphones? • Audio Interference Troubleshooting Guide
REVIEWS • HiFiMan HE-560 • Beyerdynamic T1 2. Generation • Schiit Bifrost 4490 • Schiit Valhalla 2
RECOMMENDATIONS • The Audio Board's Recommended Gear

Link to comment
Share on other sites
Link to post
Share on other sites
Posted 


-SNIP-




I was really bored while doing homework so I decided to expand off Shan-Dysigns version of your program @OP to allow the user to shut of the color options by pressing the button again  :) I thought you might be able to learn a bit from how I did it  :P




<!DOCTYPE html>


<html>


<head>


<title>JS COLOR-IFY</title>


<script>


    var intervalId;


    var coloredBlue = false;


    var coloredRed = false;


    var strobing = false;


	function changeColorBlue(color) 


    {


        var element = document.getElementById("creed");


        coloredRed = false


        strobing = false;


        stopTheStrobe();


        if (coloredBlue == false) 


        {


            coloredBlue = true;


            element.style.color = color;


        }


        else 


        {


            coloredBlue = false;


            element.style.color = 'black';


        }


	  }


	function changeColorRed(color) 


    {


        var element = document.getElementById("creed");


        coloredBlue = false


        strobing = false;


        stopTheStrobe();


        if (coloredRed == false) 


        {


            coloredRed = true;


            element.style.color = color;


        }


        else 


        {


            coloredRed = false;


            element.style.color = 'black';


        }


	  }


	function colorStrobe() 


    {


        coloredRed = false


        coloredBlue = false


        if (strobing == false)


        {


            strobing = true;


            intervalId = setInterval(strober, 250);


        }


        else 


        {


          strobing = false;


          stopTheStrobe();


        }


	  }


	function strober() 


    {


		var element = document.getElementById("creed");


		if (element.style.color == 'red') 


        {


			element.style.color = 'blue';


		} 


        else 


        {


			element.style.color = 'red';


		}


	}


	function stopTheStrobe() 


    {


		clearInterval(intervalId);


        var element = document.getElementById("creed");


        element.style.color = 'black';


	}


</script>


</head>


<body>


<h1 id="creed"> HELLO </h1>


<button onclick="changeColorBlue('blue')">BLUE-IFY</button>


<button onclick="changeColorRed('red')">RED-IFY</button>


<button onclick="colorStrobe()">STROBE-IFY</button>


</body>


</html>


PS: JSBin.com is a great online debugging tool to see a real-time, interactive view of your JavaScript  :)


			
		


		
			

	

		

		

			
My Current Build: 


Intel i5 3570K @ 4.4GHz 1.11V, Cooler Master Hyper 212 EVO, Asrock Z77 Extreme4, Corsair Vengeance 8GB 1600MHz, Samsung 840 EVO 250GB, Asus GTX 760 DCII Overclocked, Corsair CX600M


		

	


		
	


	

	






















	

	





	
Link to comment

	
		
	
	
	

	
	
Share on other sites

	

	


	

	

	




	


		
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
			
		
	

	





							

						

						


	

		
		
		
			

				



	
	



			

			

		
		

	

		
	


	


					

					

				

			

			
		

		
		


	×