Count circle and square surface

Hi
I have a homework that needs help. on about half I have done , I guess but count and display do not. please help me. I need to count circle and square surfaces. I just started javascript. thank you

<!DOCTYPE html>
<html>
<body>

<p>Press a key on the keyboard in the input field.</p>

<input type="text" size="40" id="a" onkeydown="myFunction1(event)"><br><br>
<input type="text" size="40" id="b" onkeydown="myFunction2(event)">

<p id="demo">result 1 </p>
<p id="demo1">result 2 </p>

<p>Click to disable the BUTTON element:</p>

<button type="button" id="myBtn" onclick="myFunction()">Try it</button>

<script>
function myFunction1(event) {
  var x = event.key;
  document.getElementById("demo").innerHTML = "The pressed key was: " + x;
}
function myFunction2(event) {
  var y = event.key;
  document.getElementById("demo1").innerHTML = "The pressed key was: " + y;
}

function myFunction() {
  var z = document.getElementById("myBtn");
  document.getElementById("x");
  document.getElementById("y");
}
</script>

</body>
</html>

The code you posted has nothing showing circles or squares let alone count their surfaces. You might want to start by posting what the homework assignment instructions are so that we all know what you are asked to make.

So far all you have is a few onclick event handlers. Your function is also referencing elements that have ids x and y and yet you have no elements with those ids.

Again, type out what your homework assignment instructions are and then maybe we can help further. Btw, we are not just going to hand you the answers… you will need to learn this stuff so showing us what you are trying always helps! :slight_smile:

thank you for answer. the homework requirement is .$o get values from keyboard and from this values count circle surface : 2r3.14, square 4*height, then display results, also event.key write more numbers in input field by pressing it but appears in a variable only one number.
thank you.

Thanks. So first of all, when you get a value from a textbox it is going to be a string. That is, a series of characters and not seen as numbers. So you want to get the value from the textbox, convert it to a number that you can then plug into your formulas.

I recommend that you put your formulas first into some functions you can call. Maybe something like…

function calculateSphereSurface(radius) {
     // Put your formula here using radius and return it
}

function calculateSquareSurface(height) {
    // Put your formula for using height times 4 and return it
}

Then it is just a matter of reading the values you input, convert them to numbers and pass them to your functions. Then when you get the return value from them, putting them into your demo and demo1 elements there to show the result.

Get the idea?

thank you for answer. one problem is reading. value., I type a value in input field let say 33 and in an x variable appears only 3.typing is not updated, variable is incorrect.
the other problem is that clicking a button this entered value is not ‘seen’, operation is not effected cam I get help?thank you.

the updated one is not doing calculation, does;nt even handle variables, please help me.

<!DOCTYPE html>
<html>
<body>

<p>Press a key on the keyboard in the input field.</p>

<input type="text" size="40" id="a" onkeydown="myFunction1(event)"><br><br>
<input type="text" size="40" id="a" onkeydown="myFunction2(event)"><br><br>
<input type="text" size="40" id="b" onkeydown="myFunction3(event)">

<p id="demo">result 1 </p>
<p id="demo1">result 2 </p>

<p>Click for result</p>

<button type="button" id="myBtn" onclick="myCirkle()">Cirkle</button>

<button type="button" id="myBtn" onclick="mySquare()">Square</button>

<button type="button" id="myBtn" onclick="myTriangle()">Triangle</button>

<script>
//var x= event.key;
//var y = event.key;

function myFunction1(event) {
  var x= event.key;
  document.getElementById("demo").innerHTML = "The pressed key was: " + x;
}
function myFunction2(event) {
  var y = event.key;
  document.getElementById("demo1").innerHTML = "The pressed key was: " + y;
}
function myFunction3(event) {
  var z = event.key;
  document.getElementById("demo1").innerHTML = "The pressed key was: " + z;
}
function myCirkle() {
  
  let crk = 0;
  crk = 2*x*3,14;
  document.getElementById("myBtn").innerHTML = "The pressed key was: " + crk;
}
function mySquare() {
  let sq=0;
  sq=2*x+2*y;
  document.getElementById("myBtn").innerHTML = "The pressed key was: " + y;
  document.getElementById("x");
  document.getElementById("y");
  
}

function myTriangle() {
let trg=0;
trg=x+y+z;
  var m = document.getElementById("myBtn");
  document.getElementById("x");
  document.getElementById("y");
}
</script>

</body>
</html>

Ok one thing you have to know is that variables have scopes. I don’t know if you covered this, but if you define a variable inside a function, it only exists inside that function (known as function scope). This means that you can’t see variables like x or y because you have defined those in function and not available in your myCirkle function.

So you have two main choices. The first one is that you can pass the values of x or y to a function and then use it there or you can define the values outside the functions and thus making them what we call “global variables” (aka global scope).

Ideally you want to avoid using global variables if you can. However, to show you how this might work, I have put your code into a pen, set the variables to be global (look at where I defined them and how I use them in functions). Play with this pen and see why it is working this way.

One other thing I want to point out is that many languages were developed by those in North America or western cultures who use decimal points in place where you might use a comma. So it is 3.14 instead of 3,14. You can of course change this back when formatting the output.

Check out some of the pen below to see how this might work and see if you can try the other way of passing variables to the functions instead.

AngularJS is soon to be a legacy framework. I think it’s not worth learning now but migrating from it.

Hi
thank you for help. there are a few problems. one is as I type 12 I get two only, can I get help?thank you

Well you do know how event.key works right? It is the last item you type. So when you type 1, it shows 1 and when you type 2 it shows 2. If you press the “Cirkle” button you get your answer. Now if you are wanting the whole value from the input, read the value from the textbox, not just using the event.key. If you use onkeyup as the event instead of onkeydown and then read event.target.value you can get the value of the entire input for your calculations.