Mam mały problem.

Uczę się JavaScript i postanowiłem stworzyć konwerter walutowy, ale moja strona prowadzi odświeżanie po wyświetleniu danych.

Czy ktoś może mi pomóc dowiedzieć się, dlaczego działa w ten sposób? Dzięki

Strona internetowa: http://nonlocalhost.uphero.com/index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <style type="text/css">
        * {font-size:13px;font-family:arial;background-color:black;color:white;padding:0;margin:0;}
        #wrapper {width:640px;margin:0px auto;}

        input {color:lime;width:150px;height:22px;}
        #money_to_convert, label:nth-child(3) {position:relative;top:100px;right:95px;}
        #my_currency {width:53px;height:22px;position:relative;top:100px;left:232px;}
        #converted_input, label:nth-child(5) {position:relative;top:134px;right:298px;}
        #convert_currency {width:53px;height:22px;position:relative;top:134px;left:175px;}
        #submit_button {width:52px;height:25px;position:relative;top:117px;right:230px;}
    </style>
    <script type="text/javascript">
        function output_value() {
            var my_input = Number(document.getElementsByName("user_input")[0].value);
            var my_output;
            var my_currency = document.convertions.currency_to_convert.value;
            var convert_to = document.convertions.convert_currency_to.value;


            if(my_currency == "USD"){
                if(convert_to == "CAD"){
                    my_output = my_input * 0.975;
                    document.getElementsByName("convertion_output")[0].value = my_output;
                }else if(convert_to == "EUR"){
                    my_output = my_input * 0.775;
                    document.getElementsByName("convertion_output")[0].value = my_output;
                }else if(convert_to == "GBP"){
                    my_output = my_input * 0.620;
                    document.getElementsByName("convertion_output")[0].value = my_output;
                }else if(convert_to == "AUD"){
                    my_output = my_input * 0.956;
                    document.getElementsByName("convertion_output")[0].value = my_output;
                }else{
                    alert("You can't convert the same currency.");
                }
            }else if(my_currency == "CAD"){
                if(convert_to == "USD"){
                    my_output = my_input * 1.025;
                    document.getElementsByName("convertion_output")[0].value = my_output;
                }else if(convert_to == "EUR"){
                    my_output = my_input * 0.795;
                    document.getElementsByName("convertion_output")[0].value = my_output;
                }else if(convert_to == "GBP"){
                    my_output = my_input *  0.636;
                    document.getElementsByName("convertion_output")[0].value = my_output;
                }else if(convert_to == "AUD"){
                    my_output = my_input *  0.980;
                    document.getElementsByName("convertion_output")[0].value = my_output;
                }else{
                    alert("You can't convert the same currency.");
                }
            }else if(my_currency == "EUR"){
                if(convert_to == "USD"){
                    my_output = my_input * 1.289;
                    document.getElementsByName("convertion_output")[0].value = my_output;
                }else if(convert_to == "CAD"){
                    my_output = my_input * 1.257;
                    document.getElementsByName("convertion_output")[0].value = my_output;
                }else if(convert_to == "GBP"){
                    my_output = my_input * 0.800;
                    document.getElementsByName("convertion_output")[0].value = my_output;
                }else if(convert_to == "AUD"){
                    my_output = my_input * 1.233;
                    document.getElementsByName("convertion_output")[0].value = my_output;
                }else{
                    alert("You can't convert the same currency.");
                }
            }else if(my_currency == "GBP"){
                if(convert_to == "USD"){
                    my_output = my_input * 1.610;
                    document.getElementsByName("convertion_output")[0].value = my_output;
                }else if(convert_to == "EUR"){
                    my_output = my_input * 1.249;
                    document.getElementsByName("convertion_output")[0].value = my_output;
                }else if(convert_to == "CAD"){
                    my_output = my_input * 1.571;
                    document.getElementsByName("convertion_output")[0].value = my_output;
                }else if(convert_to == "AUD"){
                    my_output = my_input * 1.541;
                    document.getElementsByName("convertion_output")[0].value = my_output;
                }else{
                    alert("You can't convert the same currency.");
                }
            }else if(my_currency == "AUD"){
                if(convert_to == "USD"){
                    my_output = my_input * 1.045; 
                    document.getElementsByName("convertion_output")[0].value = my_output;
                }else if(convert_to == "EUR"){
                    my_output = my_input * 0.810;
                    document.getElementsByName("convertion_output")[0].value = my_output;
                }else if(convert_to == "GBP"){
                    my_output = my_input * 0.648;
                    document.getElementsByName("convertion_output")[0].value = my_output;
                }else if(convert_to == "CAD"){
                    my_output = my_input * 1.019;
                    document.getElementsByName("convertion_output")[0].value = my_output;
                }else{
                    alert("You can't convert the same currency.");
                }
            }else{
                alert("Fatal Error, refresh the page.");
            }
        }
    </script>
</head>

<body>
    <div id="wrapper">
        <form name="convertions">
            <select name="currency_to_convert" id="my_currency">
                <option value="USD" selected>USD</option>
                <option value="CAD">CAD</option>
                <option value="EUR">EUR</option>
                <option value="GBP">GBP</option>
                <option value="AUD">AUD</option>
            </select>
            <select name="convert_currency_to" id="convert_currency">
                <option value="USD">USD</option>
                <option value="CAD" selected>CAD</option>
                <option value="EUR">EUR</option>
                <option value="GBP">GBP</option>
                <option value="AUD">AUD</option>
            </select>
            <label for="user_input">Amount:</label>
            <input type="text" name="user_input" id="money_to_convert" />
            <label for="convertion_output">Result:</label>
            <input type="text" name="convertion_output" id="converted_input" disabled="disabled" />
            <button onclick="output_value()" id="submit_button">Submit</button>
        </form>     
    </div>
</body>

</html>
1
Dany 13 wrzesień 2012, 02:46

3 odpowiedzi

Najlepsza odpowiedź

Domyślne zachowanie przycisku jest działanie jak przycisk przesyłania, jeśli jest w formularzu. Jeśli dodasz typ = "przycisk", przestaje działać jak przycisk przesyłania

<button onclick="output_value()" type="button" id="submit_button">

Możesz również zwrócić fałszywe od obsługi (jak można z <input type="submit">), aby zapobiec zachowaniu domyślnego.

<button onclick="output_value(); return false" id="submit_button">

Nie, żebyś naprawdę nie potrzebujesz tutaj formy, ponieważ go nie składasz. Usuwanie formularza rozwiązuje również swój problem.

Zobacz Jak zapobiegać przedłożeniu formularzy

9
Community 23 maj 2017, 11:44

To nie jest odpowiedź, która rozwiązuje twój problem, ale chciałem po prostu zrefualizować tę funkcję.

/* USD to... */
var rates = {
  USD: 1,
  CAD: 0.975,
  EUR: 0.775,
  GBP: 0.620,
  AUD: 0.956
};
function output_value() {
  var my_input = parseFloat(document.getElementsByName("user_input")[0].value);
  var my_currency = document.convertions.currency_to_convert.value;
  var convert_to = document.convertions.convert_currency_to.value;
  var output = document.getElementsByName('convertion_output')[0];

  // side note. "conversion" is spelt with an 's' not a t.
  output.value = my_input / rates[my_currency] * rates[convert_to];
}

W rzeczywistości może być jednoskładnikowa, ponieważ każda z tych zmiennych jest używana tylko raz, ale jest to prawdopodobnie bardziej czytelne.

2
nickf 12 wrzesień 2012, 23:02

Formularz jest przesyłany, więc strona odświeża po tym. Poprawka polega na umieszczeniu słuchacza w formularzu i posiada dźwignię Wyślij ją, a następnie zwróć false, aby formularz nie złożył. W ten sposób, jeśli JavaScript jest wyłączony, niedostępny lub nie działa pomyślnie, formularz podnosi i możesz wykonać konwersję na serwerze.

Wspólną strategią ma mieć formularz, który działa poprawnie bez żadnego skryptu, a następnie dodać skryptowanie, aby uniknąć połączeń serwerowych, jeśli to możliwe. Aby to zrobić, musisz dodać atrybuty nazw do elementów sterujących formularza lub zmienić atrybuty ID do atrybutów nazwy.

Przyciski w formie są domyślnie typu przesyłane.

Aby "odświeżyć stronę", możesz po prostu zadzwonić do metody resetowania formularza, a można przekazać odniesienie do formularza z jego przelicznika, więc:

Na przykład W HTML:

<form name="convertions" onsubmit="return output_value(this)">

    ...
    <button>Submit</button>

Iw funkcji:

function output_value(form) {

    // var my_currency = document.convertions.currency_to_convert.value;
    var my_currency = form.currency_to_convert.value;

    // and so on
    ...

    alert("Fatal Error, refresh the page.");
    // reset the form
    form.reset(); 

    // stop the form submitting
    return false;
}    
0
RobG 12 wrzesień 2012, 22:56