Klikalna lista opcji

0

Hejka, kod poniżej wyświetla prosty kalkulator oparty na formularzach, zastanawiam się jak przyciski zamienić na listę, tak żeby naciśnięcie opcji z listy powodowało wykonanie działania, albo wybranie opcji z listy i osobny przycisk OBLICZ obok do wykonania wybranego działania, ma ktoś jakiś pomysł?

<html lang="pl">
 
  <head>
 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 
    <meta http-equiv="Content-Script-Type" content="text/javascript">
 
    <title>Moja strona WWW</title>
 
    <script type="text/javascript">
 
    function obliczIloraz(formularz){
    var a=formularz.a.value;
    var b=formularz.b.value;
    if (b==0)   alert ('Nie ma dzielenia przez 0');else
    if (isNaN(parseFloat(a))) alert ('a nie jest liczba'); else
    if (isNaN(parseFloat(b))) alert ('b nie jest liczba'); else
    alert('a/b = ' +(a/b));
    }
 
 
   
    </script>

    <script type="text/javascript">
 
    function obliczSume(formularz){
    var a=parseFloat(formularz.a.value);
    var b=parseFloat(formularz.b.value);
    if (isNaN(parseFloat(a))) alert ('a nie jest liczba'); else
    if (isNaN(parseFloat(b))) alert ('b nie jest liczba'); else
    alert('a+b = ' +(a+b));
    }
 
 
   
    </script>

    <script type="text/javascript">
 
    function obliczIloczyn(formularz){
    var a=formularz.a.value;
    var b=formularz.b.value;
    if (isNaN(parseFloat(a))) alert ('a nie jest liczba'); else
    if (isNaN(parseFloat(b))) alert ('b nie jest liczba'); else
    alert('a*b = ' +(a*b));
    }
 
 
   
    </script>

    <script type="text/javascript">
 
    function obliczRoznice(formularz){
    var a=formularz.a.value;
    var b=formularz.b.value;
    if (isNaN(parseFloat(a))) alert ('a nie jest liczba'); else
    if (isNaN(parseFloat(b))) alert ('b nie jest liczba'); else
    alert('a-b = ' +(a-b));
    }
 
 
   
    </script>
 
  </head>
 
  <body>
 
  <form action="" method="post">
  a=<input type="text" name="a"/>
  b=<input type="text" name="b"/>
  <input type="submit" value="a/b" onClick="obliczIloraz(this.form);" />
  </form>
 

  <form action="" method="post">
  a=<input type="text" name="a"/>
  b=<input type="text" name="b"/>
  <input type="submit" value="a+b" onClick="obliczSume(this.form);" />
  </form>

  <form action="" method="post">
  a=<input type="text" name="a"/>
  b=<input type="text" name="b"/>
  <input type="submit" value="a*b" onClick="obliczIloczyn(this.form);" />
  </form>

  <form action="" method="post">
  a=<input type="text" name="a"/>
  b=<input type="text" name="b"/>
  <input type="submit" value="a-b" onClick="obliczRoznice(this.form);" />
  </form>
 
 
  </body>
 
</html>

Dodam że listę już skonstruowałem ale nie wiem za bardzo co dalej,

</script>
    </head>    
      <body>
          <form action="" method="post">
            a=<input type="text" name="a"/>
            b=<input type="text" name="b"/>
        <select name="">
		<option>a*b</option>
		<option>a/b</option>
        <option>a+b</option>
        <option>a-b</option>
	</select>
2

https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_onchange

0

Dobra pobrałem które działanie chcę wykonać ale nie wiem co dalej, chciałem jakoś na ifach ale nic nie zadziałało więc to chyba bez sensu, a więcej pomysłów nie mam, może ktoś coś poradzić?

<!DOCTYPE html>
<html>
<body>

<form action="" method="post">
a=<input type="text" name="a"/>
b=<input type="text" name="b"/>
<select id="lista" onchange="myFunction()">
  <option value="a+b">a+b</option>
  <option value="a-b">a-b</option>
  <option value="a*b">a*b</option>
  <option value="a/b">a/b</option>
</select>
    </form>
    
       <script>
     function obliczIloczyn(formularz){
    var a=formularz.a.value;
    var b=formularz.b.value;
    if (isNaN(parseFloat(a))) alert ('a nie jest liczba'); else
    if (isNaN(parseFloat(b))) alert ('b nie jest liczba'); else
    alert('a*b = ' +(a*b));
    }
    </script>
    
<input type="submit" value="WYKONAJ" onClick="obliczIloczyn(this.form);" />
<p id="demo"></p>

<script>
function myFunction() {
  var x = document.getElementById("lista").value;
  document.getElementById("demo").innerHTML = "WYBRALES " + x;
    
}
</script>

</body>
</html>
2

Nie wiem, po grzyba kombinujesz z this.form zamiast łapać elementy po ID-ach, ale jak już musisz, to umieść
<input type="submit" value="WYKONAJ" onClick="obliczIloczyn(this.form);" /> wewnątrz formularza.

myFunction maż podpięte do onchange SELECT-a, wyświetlasz odczytaną wartość i nigdzie jej dalej nie przekazujesz,
a w obliczIloczyn uruchamiany na onClick INPUTA czyta tylko wartości pól A i B.

Wywal myFunction, przenieś odczyt stanu SELECTA do funkcji liczącej operację na polach, zmień nazwę tej funkcji na adekwatną do tego co robi, bo obliczIloczyn jest w tym kontekście konfudujące i uzależnij rodzaj operacji wykonywanych na A i B zależnie od stanu SELECTA.

0

Dobra, zastosowałem się do wskazówek i skleciłem coś takiego, właściwie to działa poprawnie ale czemu nie wyświetla sie co wybrałem w sensie WYBRALES itd...(to nie ma znaczenia dla mnie ale pytam), dziękuję za pomoc, jesteś kochana :D

<!DOCTYPE html>
<html>
<body>

<form action="" method="post">
a=<input type="text" name="a"/>
b=<input type="text" name="b"/>
<input type="submit" value="WYKONAJ" onClick="TotalnieNieKonfudującaNazwa(this.form);" />
<select id="lista" onchange="TotalnieNieKonfudującaNazwa()">
  <option value="a+b">a+b</option>
  <option value="a-b">a-b</option>
  <option value="a*b">a*b</option>
  <option value="a/b">a/b</option>
</select>
    </form>
    
       <script>
     function TotalnieNieKonfudującaNazwa(formularz){
    var a=formularz.a.value;
    var b=formularz.b.value;
    var x = document.getElementById("lista").value;
    document.getElementById("demo").innerHTML = "WYBRALES " + x;
    if (b==0)   alert ('Nie ma dzielenia przez 0');else
    if (isNaN(parseFloat(a))) alert ('a nie jest liczba'); else
    if (isNaN(parseFloat(b))) alert ('b nie jest liczba'); else
        if (x=='a*b') { alert('a*b = ' +(a*b)); }
        else if  (x=='a/b')  {alert('a/b = ' +(a/b));}
        else if  (x=='a-b')  {alert('a-b = ' +(a-b));}
        else if  (x=='a+b')  {alert('a+b = ' +(a+b));}
    }
    </script>
    
<p id="demo"></p>


</body>
</html>
2

To teraz jeszcze:

  • zdejmij onchange z SELECT-a, bo nie chcesz wywoływać swojej funkcji liczącej w momencie zmiany jego wartości tylko po kliknięciu w WYKONAJ,
  • zmień <input type="submit" -> <input type="button" no chyba, że twoją intencją jest późniejsze przesyłanie wklepanych wartości do obróbki po stronie serwera,
  • (a+b) dla a=1 i b=2, da ci... 12, więc użyj np. ((a*1)+(b*1))
0

Dobra ostatecznie dodałem a=parseInt(przypisaniewartoscitp) i zadziałało, kod jest tu niżej, dzięki za pomoc wszystkim, do następnego

<!DOCTYPE html>
<html>
<body>

<form action="" method="post">
a=<input type="text" name="a"/>
b=<input type="text" name="b"/>
<input type="submit" value="WYKONAJ" onClick="TotalnieNieKonfudującaNazwa(this.form);"/>
<select id="lista">
 <option value="a+b">a+b</option>
 <option value="a-b">a-b</option>
 <option value="a*b">a*b</option>
 <option value="a/b">a/b</option>
</select>
   </form>

      <script>
    function TotalnieNieKonfudującaNazwa(formularz){
   var a=parseInt(formularz.a.value);
   var b=parseInt(formularz.b.value);
   var x = document.getElementById("lista").value;
   if (b==0 && x=='a/b')   alert ('nie ma dzielenia przez 0');else
   if (isNaN(parseFloat(a))) alert ('a nie jest liczba'); else
   if (isNaN(parseFloat(b))) alert ('b nie jest liczba'); else
       if       (x=='a*b')  {alert('a*b = ' +(a*b));}
       else if  (x=='a/b')  {alert('a/b = ' +(a/b));}
       else if  (x=='a-b')  {alert('a-b = ' +(a-b));}
       else if  (x=='a+b')  {alert('a+b = ' +(a+b));}
   }
   </script>

</body>
</html>

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