<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>

var x, y, z;
function myFunction1(event) {
  x= event.key;
  document.getElementById("demo").innerHTML = "The pressed key was: " + x;
}
function myFunction2(event) {
  y = event.key;
  document.getElementById("demo1").innerHTML = "The pressed key was: " + y;
}
function myFunction3(event) {
  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");
}