Próbuję zrobić prosty kalkulator z 4 opcjami (/ * + -), ale w jakiś sposób moje wydarzenia Onclick i Onkeyup odmówić pracy. Próbowałem różnych metod, aby działały moje wydarzenia (dodanie zapobiegania, zwrócić false), a następnie porzucam, ponieważ nie jestem w stanie go naprawić. Jeśli nie masz nic przeciwko, pomóż mi!

HTML:

<body>
<div id="wrap">
  <div id="header">
      <h1>Simple Calculator</h1>
<form name="form" id="form"> 
    <input type="number" name="addta1" onkeyup="calc();"/>
  <span id="plusadd">+</span>
    <input type="number" name="addta2" onkeyup="calc();"/>
    =
    <span id="addresult"></span> 

    <br/>

    <input type="number" name="subta1" onkeyup="calc();"/>
    -
    <input type="number" name="subta2" onkeyup="calc();"/>
    =
    <span id="subresult"></span>

    <br/>

    <input type="number" name="multa1" onkeyup="calc();"/>
    *
    <input type="number" name="multa2" onkeyup="calc();"/>
    =
    <span id="mulresult"></span>

    <br/>

    <input type="number" name="divta1" onkeyup="calc();"/>
    /
    <input type="number" name="divta2" onkeyup="calc();"/>
    =
    <span id="divresult"></span>

    <br/>
  <div class="buttonwrap">
  <input onclick="calc();" type="submit" value="Submit" name="submit" method="post"/>
  <input type="reset" value="Reset" name="reset"/>
  </div>
</form>
  </div>
  </div>
  </body>

JavaScript:

function calc() {
var addOne = parseInt(document.form.addta1.value);
var addTwo = parseInt(document.form.addta2.value);
var subOne = parseInt(document.form.subta1.value);
var subTwo = parseInt(document.form.subta2.value);
var mulOne = parseInt(document.form.multa1.value);
var mulTwo = parseInt(document.form.multa2.value);
var divOne = parseInt(document.form.divta1.value);
var divTwo = parseInt(document.form.divta2.value);

var addResult = addOne + addTwo
var subResult = subOne - subTwo
var mulResult = mulOne * mulTwo
var divResult = divOne / divTwo
document.getElementById('addresult').innerHTML = addResult;
document.getElementById('subresult').innerHTML = subResult;
document.getElementById('mulresult').innerHTML = mulResult;
document.getElementById('divresult').innerHTML = divResult;
}

Oto skrzypce z CSS na nim: http://jsfiddle.net/rpcyf/ Będę rep i zatwierdzę jak zwykle każdy pomocny post! Z góry dziękuję!

0
Stoyan Denkov 1 grudzień 2013, 20:54

2 odpowiedzi

Najlepsza odpowiedź

Po zmianie opcji Wrap w JSFiddle z "Onload" do "No Wrap - in", będzie działać.

Zobacz tutaj: http://jsfiddle.net/rpcyf/1/

// no code changed

Ta odpowiedź wyjaśnia go i daje kilka opcji.

Przycisk przesyłania musi zwrócić fałszywe, aby zapobiec odświeżaniu strony (lub użyć dowolnej innej metody).

I kolejna sugestia, użyj "Onchange" zamiast "Onkeyup", aby oglądać zmiany w polach wejściowych (najlepiej, nie korzystając z atrybutów HTML, ale wiązania grupy) ... zobacz tutaj (zmieniłem tylko dwie pierwsze pola): http://jsfiddle.net/rpcyf/2/

PODSUMOWANIE

  • Zmień opcję JSFiddle Wrap do "No Wrap ..."
  • Zapobiegaj przycisku przesyłania Domyślne działanie (najprostszym sposobem jest zwrócenie fałszywego połączenia ONCLICK)
  • Rozważ użycie słuchaczy zmiany zamiast słuchacza klucza, ponieważ obsługuje to naciśnięcia klawiszy, kliknięcia przycisku, akcje kół myszy itp. Jest to bardziej naturalne podejście do pożądanego zachowania.
  • Grupuj odpowiednie pola wejściowe przez klasę, na przykład i wiążą słuchacza zdarzenia, zamiast używać atrybutu HTML dla każdej instancji - sprawi, że Twój kod jest znacznie bardziej czytelny i utrzymujący
1
Community 23 maj 2017, 10:25

Wybrałeś "Onload" jako opakowanie dla JS w JSFiddle. To okłada wszystkich JS w funkcji, która nazywa się, gdy pożary zdarzeń obciążenia.

W konsekwencji (która jest ogólnie pożądana), ponieważ twoje funkcje nie są już globalami.

Ponieważ nie są globalne, nie są poza zakresem wewnętrznych atrybutów zdarzeń.

Zastąp swoje narzędzia obsługi obsługi JavaScript zamiast atrybutów HTML.

addEventListener('keypress', calc);

http://jsfiddle.net/rpcyf/3/

1
Quentin 1 grudzień 2013, 17:09