<!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="√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.
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="√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.