Jump to content
Please Use CODE Tags

Trying to make Javascript work

apaydinabdul
By apaydinabdul
in Programming
 Share
Posted

Okay I didn't know anything about Javascript so I thought like let's learn it. After "learning" some basics I tried to make something small work. Here is my code: 

<!doctype HTML>
	<html>
		<head>
			<title>Testing</title>
		</head>
		<body>
			<p>Hi</p>
			<p id="show_x"></p>
			<script>
			var x = 0;
			function add_1_to_x
			{
				x = x + 1;
			}
			function show_x
			{
				document.getElementById("show_x").innerHTML = x;
			}
			</script>
		</body>
	</html>

So when I run this on Chrome it doesn't show the paragraph "show_x". I should be seeing numbers adding up, right? What am I doing wrong (I'm sure it's something stupid or I don't quite understand Javascript yet (I think it's the 2nd one..))

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

You're missing argument list for your functions declaration, even if it is empty, just put () at end of each function name. Second thing is that you're returning from function before it set innerHTML of an element, and last thing is that you don't call your functions so code inside them is not executed.

  

function test() //Function with 0 length argument list
{
  alert('hello');
}

test(); //Function call

 

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

First you have left of the () after the function name 

            function add_1_to_x()
            {
                x = x + 1;
            }
            function show_x()
            {
                document.getElementById("show_x").innerHTML = x;
            }

 

Second your code will do nothing unless you tell javascript to run the show_x() function and add_1_to_x() function

 

A few helpful webpages for you to read

https://developer.mozilla.org/en/docs/Web/JavaScript/Guide/Functions

https://developer.mozilla.org/en/docs/Web/API/GlobalEventHandlers/onload

https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setInterval

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
  • Author
6 minutes ago, C2dan88 said:

First you have left of the () after the function name

  


            function add_1_to_x()
            {
                x = x + 1;
            }
            function show_x()
            {
                document.getElementById("show_x").innerHTML = x;
            }

 

 

Second your code will do nothing unless you tell javascript to show_x() function on page load

 

8 minutes ago, Mr_KoKa said:

You're missing argument list for your functions declaration, even if it is empty, just put () at end of each function name. Second thing is that you're returning from function before it set innerHTML of an element, and last thing is that you don't call your functions so code inside them is not executed.

  


function test() //Function with 0 length argument list
{
  alert('hello');
}

test(); //Function call

 

I don't think I quite understand you both. This is what I've changed. However the result is that it just shows:

Spoiler

Hi

 

test(add_1_to_x()); test(show_x()); 

<!doctype HTML>
	<html>
		<head>
			<title>Testing</title>
		</head>
		<body>
			<p>Hi</p>
			<p id="show_x"></p>
			<script>
			var x = 0;
			function add_1_to_x()
			{
				x = x + 1;
			}
			function show_x()
			{
				document.getElementById("show_x").innerHTML = x;
			}
			</script>
			add_1_to_x();
			show_x();
		</body>
	</html>

 

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
  • Author
9 minutes ago, C2dan88 said:

First you have left of the () after the function name 


            function add_1_to_x()
            {
                x = x + 1;
            }
            function show_x()
            {
                document.getElementById("show_x").innerHTML = x;
            }

 

Second your code will do nothing unless you tell javascript to run the show_x() function and add_1_to_x() function

 

A few helpful webpages for you to read

https://developer.mozilla.org/en/docs/Web/JavaScript/Guide/Functions

https://developer.mozilla.org/en/docs/Web/API/GlobalEventHandlers/onload

https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setInterval

 

2 minutes ago, C2dan88 said:

@apaydinabdul read my post again I edited it

Thanks for the links, I'm reading the Mozilla one now.

 

I am very disorientated right now. I'm very sorry for not looking this up but I'm going to simply ask you. What the HECK is a parameter. What's it's use. For me it seems like it's just a variable? Why not just create a var INSIDE the function then?

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

I am such a professional. I forgot to put "" around the ID of document.getElementById(show_x).innerHTML = x;

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
10 hours ago, apaydinabdul said:

I am very disorientated right now. I'm very sorry for not looking this up but I'm going to simply ask you. What the HECK is a parameter. What's it's use. For me it seems like it's just a variable? Why not just create a var INSIDE the function then?

its a variable you pass to a function. 

  


 

function addOne(number){

return number + 1;

}

 

addOne(2);

 

this code would send 2 to the function add one and return 3. 

                     ¸„»°'´¸„»°'´ Vorticalbox `'°«„¸`'°«„¸
`'°«„¸¸„»°'´¸„»°'´`'°«„¸Scientia Potentia est  ¸„»°'´`'°«„¸`'°«„¸¸„»°'´

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

Try this:

  

<!doctype HTML>
	<html>
		<head>
			<title>Testing</title>
		</head>
		<body>
			<p>Hi</p>
			<p id="show_x"></p>
			<script>
			var x = 0;
            		add_1_to_x();
            		show_x();
			function add_1_to_x()
			{
				x = x + 1;
			}
			function show_x()
			{
				document.getElementById("show_x").innerHTML = x;
			}
			</script>
		</body>
	</html>

 

PC: Case: Cooler Master CM690 II - PSU: Cooler Master G650M - RAM: Transcend 4x 8Gb DDR3 1333Mhz - MoBo: Gigabyte Z87x-D3H - CPU: i5 4670K @ 4.5Ghz - GPU: MSI GTX1060 ARMOR OC - Hard disks: 4x 500Gb Seagate enterprise in RAID 0 - SSD: Crucial M4 128Gb

Phone: Samsung Galaxy S6

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
8 hours ago, LUUD18 said:

Try this:

  


<!doctype HTML>
	<html>
		<head>
			<title>Testing</title>
		</head>
		<body>
			<p>Hi</p>
			<p id="show_x"></p>
			<script>
			var x = 0;
            		add_1_to_x();
            		show_x();
			function add_1_to_x()
			{
				x = x + 1;
			}
			function show_x()
			{
				document.getElementById("show_x").innerHTML = x;
			}
			</script>
		</body>
	</html>

 

although this would work my example is a much better way of doing it as it allows you pass any number or variable to it and add one, where as this will only add one to x and nothing else. 

                     ¸„»°'´¸„»°'´ Vorticalbox `'°«„¸`'°«„¸
`'°«„¸¸„»°'´¸„»°'´`'°«„¸Scientia Potentia est  ¸„»°'´`'°«„¸`'°«„¸¸„»°'´

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

also remember to declare max dword length

()=8 for 64bit or 4 for 32bit 2 for 16bit 1 for 8bit

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
2 hours ago, vorticalbox said:

although this would work my example is a much better way of doing it as it allows you pass any number or variable to it and add one, where as this will only add one to x and nothing else. 

You code wasn't complete though and the naming is horrible. You name the method addOne when you can add more then 1.

PC: Case: Cooler Master CM690 II - PSU: Cooler Master G650M - RAM: Transcend 4x 8Gb DDR3 1333Mhz - MoBo: Gigabyte Z87x-D3H - CPU: i5 4670K @ 4.5Ghz - GPU: MSI GTX1060 ARMOR OC - Hard disks: 4x 500Gb Seagate enterprise in RAID 0 - SSD: Crucial M4 128Gb

Phone: Samsung Galaxy S6

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

×