Блог

Главная - Вопросы по программированию - Почему мой веб-браузер не сохраняет мои выходные данные javascript?

Почему мой веб-браузер не сохраняет мои выходные данные javascript?

#javascript #html

#javascript #HTML

Вопрос:

Я пытаюсь разработать простой фрагмент кода.. Я создал калькулятор для вычисления градусов Цельсия / Кельвина / Фаренгейта на основе ввода HTML. Похоже, код работает. Правильные ответы появляются, но затем исчезают через долю секунды, браузер, похоже, «обновляется». Я что-то упускаю?

Html-код:

 <html>
<body>
<form>
    <label for="degrees">Degrees: </label>
    <input type="text" name="degrees" id="degrees">
    <label for="calc_type">Type: </label>
    <select name="calc_type" id="calc_type">
        <option value="celcius">Celcius</option>
        <option value="kelvin">Kelvin</option>
        <option value="fahrenheit">Fahrenheit</option>
    </select>
    <input type="submit" value="Submit" onclick="myFunction()">

  </form> 
  <table style="width: 100px">
<tr>
    <th>Celcius: </th>
    <th id="celsius_value">0</th>
    <tr></tr>
    <th>Fahrenheit: </th>
    <th id="fahrenheit_value">0</th>
    <tr></tr>
    <th>Kelvin: </th>
    <th id="kelvin_value">0</th>
</tr>
</table>
</body>
<script src="js/celcius_calulator.js"></script>
</html>

JS-код:

 function myFunction() {
    var degrees = document.getElementById('degrees').value
    var calc_type = document.getElementById('calc_type').value

    if (calc_type === "celcius") {
        cC(degrees);
    } elseif (calc_type === "fahrenheit"); {
        fC(degrees);
    } elseif (calc_type === "kelvin"); {
        kC(degrees)
    }
}

function cC(degrees) {
    celcius_value = degrees;
    kelvin_value = degrees * 273.15;
    fahrenheit_value = degrees * 1.8   32;
    document.getElementById('celsius_value').innerHTML = degrees;
    document.getElementById('fahrenheit_value').innerHTML = fahrenheit_value;
    document.getElementById('kelvin_value').innerHTML = kelvin_value.toFixed(2);
}

function fC(degrees) {
    celcius_value = Math.round(degrees - 32) / 18 * 10;
    kelvin_value = degrees   459.67 / 1.8;
    fahrenheit_value = degrees;
    document.getElementById('celsius_value').innerHTML = degrees;
    document.getElementById('fahrenheit_value').innerHTML = fahrenheit_value;
    document.getElementById('kelvin_value').innerHTML = kelvin_value.toFixed(2);
}

function kC(degrees) {
    celcius_value = degrees - 273.15
    fahrenheit_value = degrees * 1.8 - 459.67;
    kelvin_value = degrees;
    document.getElementById('celsius_value').innerHTML = degrees;
    document.getElementById('fahrenheit_value').innerHTML = fahrenheit_value;
    document.getElementById('kelvin_value').innerHTML = kelvin_value.toFixed(2);
}

Комментарии:

1. Ваши входные данные находятся в a <form> , и форма отправляется. При отсутствии атрибута «действие» поведением по умолчанию будет перезагрузка вашей страницы.

Ответ №1:

Кнопка отправки отправит содержимое формы во все, что вы указали в качестве цели формы <form action="target-url"> . Поскольку вы ничего не указали, он просто разместит содержимое форм на текущей странице.

Вам нужно будет сделать что-то вроде

 document.querySelector('form').addEventListener('submit', e => e.preventDefault())

чтобы предотвратить отправку формы, которая затем снова предотвратит перезагрузку страницы.

Затем вы также можете выполнить свою логику оценки в прослушивателе событий, чтобы в итоге не получить два прослушивателя событий (один для кнопки отправки, один для события отправки формы).

Ответ №2:

Самым простым ответом было бы передать event параметр as myFunction(event) и выполнить event.preventDefault() . Просто передайте event в качестве параметра следующее ->

 <input type="submit" value="Submit" onclick="myFunction(event)">

и в вашем js-файле сделайте это ->

 function myFunction(event) {
event.preventDefault();
var degrees = document.getElementById('degrees').value
var calc_type = document.getElementById('calc_type').value

if (calc_type === "celcius") {
    cC(degrees);
} elseif (calc_type === "fahrenheit"); {
    fC(degrees);
} elseif (calc_type === "kelvin"); {
    kC(degrees)
}

Ответ №3:

Вы можете внести следующие изменения в свой код.

    <input type="button" value="Submit" onclick="myFunction()">

Надеюсь, это решит вашу проблему.