Please help me fix this obnoxiously easy form-like calculator The scripts/functions continue to not work

<!DOCTYPE html>
<html lang="pl">
 
<head>
	
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
	
	<script src="js/skrypty.js"></script>
	
	
	<link rel="stylesheet" type="text/css" href="css.css" />
	
	
	
	<script>
		document.createElement('header');
		document.createElement('nav');
		document.createElement('article');
		document.createElement('footer');
		document.createElement('section');
		

		
	
	</script>
	
	<title>Calculator</title>
</head>
 
<body>
<form name="BasicCalc">
	<input type="text" id="field1" value="x" onfocus=''/>
	<input type="text" id="field2" value="y" onfocus=''/>
	<input type='text' id="returnfield" name='returnfield' size='20' />
	<br><br>
	<input type="button" value="C" onclick="reset()" />
	<input type="button" id="Add" value="x+y"/>
	<input type="button" id="Substract" value="x-y"/>
	<input type="button" id="Multiply" value="x*y"/>
	<input type="button" id="Divide" value="x/y"/>
	<input type="button" id="Pow2" value="x^2"/>
	<input type="button" id="CustomPow" value="x^y"/>
	<input type="button" id="Sqroot" value="&radic;x"/>
	<input type="button" id="Perc" value="(x/y)%"/>
	<br><br>


</form>
		<!--//SŁUCHACZ-->
		<script>

		document.getElementById("Add").addEventListener("click",Add())
		document.getElementById("Subtract").addEventListener("click",Subtract())
		document.getElementById("Multiply").addEventListener("click",Multiply())
		document.getElementById("Divide").addEventListener("click",Divide())
		document.getElementById("Pow2").addEventListener("click",Power2())
		document.getElementById("CustomPow").addEventListener("click",XwPowerOfY())
		document.getElementById("Sqroot").addEventListener("click",pierwiastek2())
		document.getElementById("Perc").addEventListener("click",percent())
		
		</script>
		
		
		<!---//DODAWANIE-->
		<script>
	function Add() 
    {
      var Add1=parseFloat(document.getElementById("field1").value);
      var Add2=parseFloat(document.getElementById("field2").value);
      var Add=0;
       
     Add=(dod1)+(dod2);
     document.BasicCalc.returnfield.value=Add;
    }
		</script>
		
		
		<!---//ODEJMOWANIE-->
		<script>
	function Subtract() 
    {
     var Subt1=parseFloat(document.getElementById("field1").value);
     var Subt2=parseFloat(document.getElementById("field2").value);
     var Subtraction=0;
	 
     Subtraction=Subt1-Subt2;
     document.BasicCalc.returnfield.value=Subtraction;
    }
		</script>
		
		
		<!---//MNOŻENIE-->
		<script>
	function Multiply() 
	{
     var multip1=parseFloat(document.getElementById("field1").value);
     var multip2=parseFloat(document.getElementById("field2").value);
     var Multiply=0;
      
     Multiply=multip1*multip2;
     document.BasicCalc.returnfield.value=Multiply;
	}
		</script>
		
		
		<!---//Divide-->
		<script>
	function Divide() 
    {
     var dz1=parseFloat(document.getElementById("field1").value);
     var dz2=parseFloat(document.getElementById("field2").value);
     var Divide=0;
      
     if (dz2==0)
    {
     document.BasicCalc.returnfield.value="Can't divide with 0!";
     }
     else
    {
     Divide=Math.round(dz1*100/dz2*100)/1000;
     document.BasicCalc.returnfield.value=Divide;
    }
    }
		</script>
		
		
		<!---//POTĘGA DRUGIEGO STOPNIA-->
		<script>
	function Power2() 
	{
	
		var pow=document.getElementById("field1").value;
		
		if( document.getElementById("field2").length > 0 )
		document.getElementById("field2").disabled = true;
		else
		document.getElementById("field").disabled = true;

	
		var Power2=0;
		
		Power2=(pow*pow);
		
		document.BasicCalc.returnfield.value=Power2;
		document.getElementById("field2").disabled = false;
	}
		</script>
		
		
		<!---//X With Power of Y-->
		<script>
	function XwPowerOfY() 
	{
		var powX=parseFloat(document.getElementById("field1").value);
		var powY=parseFloat(document.getElementById("field2").value);
		var XwPowerOfY=0;
		
		
	XwPowerOfY=Math.pow(powX,powY);
	XwPowerOfY=parseFloat(document.getElementById("returnfield").value);
	
	}
		</script>
		
		
		<!---//PERCENT OF X FROM Y-->
		<script>
	function percent() 
    {
		var perc1=parseFloat(document.getElementById("field1").value);
		var perc2=parseFloat(document.getElementById("field2").value);
		var percent=0;
       
    percent=Math.round(perc1/perc2*100);
    parseFloat(document.BasicCalc.returnfield.value=percent+"%");
    }
     </script>
	 
</body>
</html>

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make easier to read.

See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (</>) will also add backticks around text.

Note: Backticks are not single quotes.

markdown_Forums

1 Like

Please explain how you want this to work. I don’t see an = key. How do you make it do the calculation?

1 Like

Simply… there are 3 fields,2 to fill out, and last one to be the return of the functions
Fill out the first two fields,click the button/s with them being attached to listener,see the effect of the functions on the third one… I scrambled this so hard.I do apologise for this raw (and probably redundant) way of doing this but I wanted to do this very simple because I have to get this done in like 4-6 hours.
I didn’t expect there to be even any problems with this oh so basic… form. If you’ve got and idea on how to do this effectively I’d gladly appreciate it.

I’ve also tested this for any problems both in JavaScript(functions seperately) compilers(hah they aren’t worth a salt) and in the w3c html checker…. nevertheless I didn’t see any irregularities,the code did work some time ago, had a problem with the Math.pow,didn’t seem to make it work, broke the entire code(functions/scripts) in trying to make it work.

OK, I think I get it now.

I’m a big fan of simplifying things. If something is not working and it’s too complex to figure it out, I simplify. So, let’s just focus on the addition and get rid of the rest for the moment.

<script>
	document.getElementById("dod").addEventListener("click", dodawanie());

	function dodawanie() {
		console.log('dodawanie function called')
		var dod1=parseFloat(document.getElementById("pole1").value);
		var dod2=parseFloat(document.getElementById("pole2").value);
		var dodawanie=0;
			
		dodawanie=(dod1)+(dod2);
		document.ProstyKalk.wynik.value=dodawanie;
	}
</script>

When put that in your app I’m left with:

<!DOCTYPE html>
<html lang="pl">
 
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
	<script src="js/skrypty.js"></script>
	<link rel="stylesheet" type="text/css" href="css.css" />
	
	<script>
		document.createElement('header');
		document.createElement('nav');
		document.createElement('article');
		document.createElement('footer');
		document.createElement('section');
	</script>
	<title>Kalkulator</title>
</head>
 
<body>
<form name="ProstyKalk">
	<input type="text" id="pole1" name="X" />
	<input type="text" id="pole2" name="Y" />
	<input type='text' id="wynik" name='wynik' size='20' />
	<br><br>
	<input type="button" value="C" onclick="reset()" />
	<input type="button" id="dod" value="x+y"/>
	<input type="button" id="odejm" value="x-y"/>
	<input type="button" id="mnoz" value="x*y"/>
	<input type="button" id="dziel" value="x/y"/>
	<input type="button" id="pot2" value="x^2"/>
	<input type="button" id="potc" value="x^y"/>
	<input type="button" id="pierw2" value="&radic;x"/>
	<input type="button" id="proc" value="(x/y)%"/>
	<br><br>
</form>

<script>
	document.getElementById("dod").addEventListener("click", dodawanie());

	function dodawanie() {
		console.log('dodawanie function called')
		var dod1=parseFloat(document.getElementById("pole1").value);
		var dod2=parseFloat(document.getElementById("pole2").value);
		var dodawanie=0;
			
		dodawanie=(dod1)+(dod2);
		document.ProstyKalk.wynik.value=dodawanie;
	}
</script>
	 
</body>
</html>

When I run that, I notice that “dodawanie function called” shows up in the console immediately. (If you don’t know how to check the browser console, stop and figure that out - other than coffee, it’s the most useful tools a developer has.)

Why is it run right away? It shouldn’t run until we hit the "x+y" button? It’s because when you are defining that click handler, you are saying:

document.getElementById("dod").addEventListener("click", dodawanie());

You are accidentally evaluating the function. You are running the function with dodawanie(). So JavaScript is running that function (which is why we see the console output) and putting whatever that function returns (in this case undefined because we haven’t defined a return) as the click handler. So, we want to tell it the name of the function, not actually run the function. So, we need:

document.getElementById("dod").addEventListener("click", dodawanie);

Now it won’t run the function immediately but will wait until the click event. Does that make sense? That second parameter of addEventListener needs to be a function, not the result of a function. We want to refer to it by name (or write it inline) not run it immediately.

When I make that change, the code works as expected. I put 1 in the first box, 2 in the second box, and if I hit the x+y button, 3 appears in the answer box. You can apply this knowledge to the other click handlers.

Don’t worry, this is a common mistake. I made this same mistake at work last week. After a while you get better at spotting them and knowing to look at them. To some extent that’s what coding is - getting better and better at spotting your mistakes.

1 Like

I would also point out that:

var dodawanie=0;
dodawanie=(dod1)+(dod2);

can be simplified as:

var dodawanie = dod1 + dod2;

or really can just be skipped with:

document.ProstyKalk.wynik.value= dod1 + dod2;
1 Like

Did you perhaps saved that version? I’ve tampered with translating and I’m unsure if my past versions are the same as the one you used

I don’t know. The code I provided above works.

1 Like

I see what you mean. I did this with the code you first posted. The translation is just a moot detail. The principle still applies.

1 Like

Thats what I get for tampering with the original… seems I’ve changed much more than the translation lesson learned…. I’ll just apply that change to every version that was posted including my native,Thanks for the help,I… guess I’ll take it from here,I’ll mark it as a solution as soon as I get it to work myself.