Domkniecie kalkulatora

pytanie zadane 12 lutego 2020 w JavaScript przez Nowicjusz13 Użytkownik (570 p.)

!DOCTYPE html>
<html lang="pl">
<head>

	<meta charset="utf-8">
	<title>Kalkulator</title>

	
	<meta http-equiv="X-Ua-Compatible" content="IE=edge,chrome=1">
	<link rel="stylesheet" href="style.css" type="text/css">


      <script> 
         //funkcja wyświetlająca znaki 
         function znak(kalkulator) 
         { 
             document.getElementById("wynik").value += kalkulator 
         } 
           
         //funkcja, która ocenia cyfrę i zwraca wynik 
         function zliczanie() 
         { 
             let x = document.getElementById("wynik").value 
             let y = eval(x) 
             document.getElementById("wynik").value = y 
         } 
           
         //funkcja, która czyści wyświetlacz 
         function clean() 
         { 
             document.getElementById("wynik").value = "" 
         } 
      </script> 
      
      <style> 
        table
         {
            border-spacing: 0;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            border: 4px solid black;
            border-radius: 10px;
            box-shadow: 0 10px 10px;
         }
       td
         {
            border: 1px solid black;
            width: 100px;
            height: 100px;
            text-align: center;  
         }
  
         input[type="text"] 
         { 
            background-color: white;  
            border: solid white 2px; 
            margin-left: center;
            margin-right: center;
            color: red;
            width: 202px;
            height: 94px;
            font-size: 50px;
         } 
  
         #b1
         { 
            background-color: white; 
            border: solid white 2px; 
            margin-left: center;
            margin-right: center;
            color: grey;
            width: 100px;
            height: 100px;
            font-size: 50px;

         } 
         #b1:hover
         {
            background-color: white;
            color: red;
         }
        
         #b2
         {
            background-color: white;  
            border: solid white 2px; 
            margin-left: center;
            margin-right: center;
            color: grey;
            width: 310px;
            height: 100px;
            font-size: 50px;
         }
         #b2:hover
         {
            background-color: white;
            color: red;
         }

      </style> 
   </head> 
   
   <body> 
     
      <table> 
         <tr> 
            <!-- Funkcja clean () wywoła clean, aby usunąć wszystkie znaki -->
            <td><input id="b1" type="button" value="C" onclick="clean()"/> </td> 

            <td colspan="2"><input id="wynik" type="text"/></td> 

            <td><input id="b1" type="button" value="/" onclick="znak('/')"/> </td>
         </tr> 
         <tr> 
            <!-- utwórz przycisk i przypisz wartość do każdego przycisku -->
            <!-- zank („1”) wywoła funkcję znak, aby wyświetlić znaki -->
            <td><input id="b1" type="button" value="1" onclick="znak('1')"/> </td> 
            <td><input id="b1" type="button" value="2" onclick="znak('2')"/> </td> 
            <td><input id="b1" type="button" value="3" onclick="znak('3')"/> </td> 
            <td><input id="b1" type="button" value="*" onclick="znak('*')"/> </td> 
         </tr> 
         <tr> 
            <td><input id="b1" type="button" value="4" onclick="znak('4')"/> </td> 
            <td><input id="b1" type="button" value="5" onclick="znak('5')"/> </td> 
            <td><input id="b1" type="button" value="6" onclick="znak('6')"/> </td> 
            <td><input id="b1" type="button" value="-" onclick="znak('-')"/> </td> 
         </tr> 
         <tr> 
            <td><input id="b1" type="button" value="7" onclick="znak('7')"/> </td> 
            <td><input id="b1" type="button" value="8" onclick="znak('8')"/> </td> 
            <td><input id="b1" type="button" value="9" onclick="znak('9')"/> </td> 
            <td><input id="b1" type="button" value="+" onclick="znak('+')"/> </td> 
         </tr> 
         <tr> 
            <td colspan="3"><input id="b2" type="button" value="0" onclick="znak('0')"/> </td> 
            <!-- rozwiąż funkcję wywołanie funkcji rozwiąż, aby ocenić znaki -->
            <td><input id="b1" type="button" value="=" onclick="zliczanie()"/> </td> 
            
         </tr> 
      </table> 
   </body> 
</html>

Witam mam problem z domknieciem kalkulatora. Ogólnie kalkulator działa świetnie problem mam jedynie z inputem na wynik ( <td colspan="2"><input id="wynik" type="text"/></td>) . Zależy mi na tym aby po pierwsze nie dało się wpisływać nic do tego inputa aby służył tylko do wyświetlania liczb i znaków które nacisnołem. Po drugi zależy mi na tym by ten input " wynik" nie wyświetlał dwa razy znaków np. żeby nie było możliwości wpisania 3++/4 itp. Dzisiaj nauczyciel podpowiedział mi że ponoc jestem to wstanie zrobic za pomocą :

" addeventlistener('keydown',()=> "

Ale niestety nie mam pojęcia jak to zrobic

1 odpowiedź

odpowiedź 16 lutego 2020 przez cani Bywalec (2,060 p.)
wybrane 22 lutego 2020 przez Nowicjusz13

Najlepsza

zmien funkcje "znak", na taka:

         function znak(kalkulator){ 
          //tablica ze znakami specjalnymi
           var znaki = ['/', '*', '-', '+'],
         //wartosc elementu wynik
           wynikVal = document.getElementById("wynik").value
         //jezeli ostatni znak "wynikVal" NIE JEST zawierany w tablicy "znaki" i jezeli "kalkulator" JEST zawierany w tablicy znaki. Albo jeżeli "kalkulator" NIE JEST zawierany w tablicy znaki
            if((!znaki.includes(wynikVal[wynikVal.length-1]) && znaki.includes(kalkulator)) || !znaki.includes(kalkulator)){
                //dodaj "kalkulator" do "wynikVal"
                wynikVal  += kalkulator
            }  
         }

a w css w selektorze "input[type="text"] " dodaj: