Skrypt na Kalulator w JavaScript

0

Witam!
Potrzebuje graficzny kalkulator w javascript( nie same prompty itp)
Na razie zrobiłem sam wygląd kalkulatora:

<html> <head> <title>Projekt JavaScript - </title> </head> <style type="text/css"> .button { background-color: #f4b942; border: none; color: white; padding: 16px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 18px; margin: 4px 2px; transition-duration: 0.4s; cursor: pointer; } .button1 { background-color: #f4b942; color: black; border: 2px solid black; } 
	.button1:hover {
		background-color: white;
		color: black;
	}
</style>
<script type="text/javascript">


	function klik()

	{

	

	}

</script>
<body>

Kalkulator

<form action="kalkulator.php" method="POST">
<input type="text" size="20" name="wynik">
<input type="button" value=" 9 " name="dz" class="button1" onclick="klik();"> <input type="button" value=" 8 " name="os" class="button1"> <input type="button" value=" 7 " name="sied" class="button1"> <input type="button" value=" / " name="dziel" class="button1"> <input type="button" value=" √ " name="pierwiastek" class="button1">
<input type="button" value=" 6 " name="sze" class="button1"> <input type="button" value=" 5 " name="pie" class="button1"> <input type="button" value=" 4 " name="czt" class="button1"> <input type="button" value=" * " name="mn" class="button1"> <input type="button" value=" ² " name="potega" class="button1">
<input type="button" value=" 3 " name="trzy" class="button1"> <input type="button" value=" 2 " name="dwa" class="button1"> <input type="button" value=" 1 " name="jed" class="button1"> <input type="button" value=" - " name="minus" class="button1"> <input type="button" value=" " name="minus" class="button1">
<input type="button" value=" 0 " name="zer" class="button1"> <input type="button" value=" , " name="przec" class="button1"> <input type="button" value=" = " name="rowna" class="button1"> <input type="button" value=" + " name="plus" class="button1"> <input type="button" value=" " name="plus" class="button1">
</form> </body> </html>

Potrzebuję pomocy ze skryptem, ponieważ nie mam pojęcia jak sie za to w ogóle zabrać. Jak zrobić, aby po kliknięciu przycisku, podana wartość wpisywała się w pole input type text?
Z góry dziękuję za pomoc!
Pozdrawiam

0 
  function klik() {
    // możesz dodać id do pola i zrobić tak:
    document.getElementById("wynik").value = "some calculated value";
    // lub by name:
    document.getElementsByName("wynik")[0].value =  "some calculated value";
  }
0

Do tego kodu html na samym końcu dodajesz coś takiego i dzięki temu możesz korzystać z jQuery:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
 
<script>
 
$(document).ready(function() {

    $("input.button1").on('click', event => {
      var clickedElement = $(event.target);
      var textBox = $("input[name='wynik']");
      textBox.val(textBox.val() + clickedElement.val());  
   });

});

</script>

Teraz tak dla inputa ze znakiem "=" musiałbyś zmienić atrybut class, żeby było inne niż dla znaków i cyfr, żeby go też nie wstawiało do tego input text, no i do niego podpiąć funkcję żeby zrobił parsowanie tego tekstu z textBoxa. Dodatkowo jak masz value każdego buttona to usuń odstępy bo masz tak " 9 ", a ma być "9", bo wtedy w textBoxie będzie Ci to wstawiał z odstępami. Odstępy mógłbyś zostawić dla znaków, ale dla cyfr nie.

1 użytkowników online, w tym zalogowanych: 0, gości: 1