Использование формы для вызова javascript и последующего помещения вычисленных значений в форму

ProgramBox

Использование формы для вызова javascript и последующего помещения вычисленных значений в форму

Post author:admin
Запись опубликована:3 мая, 2023
Post category:Вопросы по программированию

#javascript #html

#javascript #HTML

Вопрос:

Я зарегистрирован в онлайн-классе и продолжаю читать раздел своей книги о включении js, но я не могу этого понять. Не мог бы кто-нибудь, пожалуйста, объяснить мне, что я делаю не так. Я пытаюсь вызвать функцию, чтобы принять вес и отобразить вычисления обратно в текстовых полях формы. Я не могу найти в Интернете ничего подобного или объяснить, как это работает. Почему это не может быть просто как C : (

 <!DOCTYPE html>
<html>
<script>
    function Weight()
    {
    var mercury = earth*(.378);
    var venus = earth*(.907);
    var mars = earth*(.377);
    var jupiter = earth*(2.364);
    var saturn = earth*(.916);
    var uranus = earth*(.889);
    var neptune = earth*(1.125);
    var pluto = earth*(.067);
    var sun = earth*(27.072);
    var moon = earth*(.166);

    }
</script>

<body>

<form action="javascript:Weight(earth);">
  Enter Your Weight on Earth:<br>
  <input type="text" name="earth">
  <br><br>
  Mercury:<br>
  <input type="text" name="mercury">
  <br>
  Venus:<br>
  <input type="text" name="venus">
  <br>
  Mars:<br>
  <input type="text" name="mars">
  <br>
  Jupiter:<br>
  <input type="text" name="jupiter">
  <br>
  Saturn:<br>
  <input type="text" name="saturn">
  <br>
  Uranus:<br>
  <input type="text" name="uranus">
  <br>
  Neptune:<br>
  <input type="text" name="neptune">
  <br>
  Pluto:<br>
  <input type="text" name="pluto">
  <br>
  Sun:<br>
  <input type="text" name="sun">
  <br>
  Moon:<br>
  <input type="text" name="moon">
  <br>
  <input type="submit" value="Calculate">
</form>


</body>
</html>

1. Он не получает значения текстовых полей волшебным образом… и тогда это тоже не устанавливается волшебным образом. Я все еще не понимаю, почему в этом случае используется отправка формы.

2. «Я не могу найти в Интернете ничего подобного или объясняющего, как это работает» : тогда вы, должно быть, говорите о другом Интернете. Он буквально полон примеров .

3. Хорошо, позвольте мне еще раз попробовать с этими ресурсами! Спасибо за статьи! 🙂

Ответ №1:

Вот рабочая демонстрация:

Создан массив planetArray , содержащий информацию о планетах
Добавлен атрибут id к входным данным отправки
Прикрепленное событие щелчка к submitButton . В функции получаем входное значение Земли и выполняем итерацию planetArray и вычисляем значение веса соответственно для планет

 var planetsArray = [{name: "mercury",weight: 0.378}, {name: "venus",weight: 0.907}, {name: "mars",weight: 0.377}, {name: "jupiter",weight: 2.364}, {name: "saturn",weight: 0.916}, {name: "uranus",weight: 0.889}, {name: "neptune",weight: 1.125}, {name: "pluto",weight: 0.067}, {name: "sun",weight:27.072}, {name: "moon",weight: 0.166}],
    submitButton = document.getElementById('submit');

// Attach click event
submitButton.onclick = function (e) {
    e.preventDefault();
    var earth = document.getElementsByName('earth')[0];
    planetsArray.forEach(function (p) {
      var elem = document.getElementsByName(p.name)[0],
          weight = p.weight *  earth.value;
      elem.value = weight.toFixed(2);
    });
};

 <form action="javascript:Weight(earth);">
  Enter Your Weight on Earth:<br>
  <input type="text" name="earth">
  <br><br>
  Mercury:<br>
  <input type="text" name="mercury">
  <br>
  Venus:<br>
  <input type="text" name="venus">
  <br>
  Mars:<br>
  <input type="text" name="mars">
  <br>
  Jupiter:<br>
  <input type="text" name="jupiter">
  <br>
  Saturn:<br>
  <input type="text" name="saturn">
  <br>
  Uranus:<br>
  <input type="text" name="uranus">
  <br>
  Neptune:<br>
  <input type="text" name="neptune">
  <br>
  Pluto:<br>
  <input type="text" name="pluto">
  <br>
  Sun:<br>
  <input type="text" name="sun">
  <br>
  Moon:<br>
  <input type="text" name="moon">
  <br>
  <input type="submit" value="Calculate" id="submit">
</form>

Ответ №2:

Здравствуйте, javascript работает не так, как вы думаете.Я не могу научить вас всему этому здесь, в Интернете есть много информации / статей, вы можете их поискать, но я могу предложить вам решение того, что вы хотели сделать.Проверьте приведенный ниже код, надеюсь, это поможет

 var earth=document.getElementById("earth");
var mercury=document.getElementById("mercury");
var venus=document.getElementById("venus");
var mars=document.getElementById("mars");

document.getElementById("button").onclick = function (e) {
e.preventDefault();
mercury.value=(earth.value) *(.378); 
venus.value=(earth.value) *(.907); 
mars.value=(earth.value) *(.377); 

 };

 <form name ="my">
  Enter Your Weight on Earth:<br>
  <input type="text" id="earth" name="earth">
  <br><br>
  Mercury:<br>
  <input type="text" id="mercury" name="mercury">
  <br>
  Venus:<br>
  <input type="text" id="venus" name="venus">
  <br>
  Mars:<br>
  <input type="text" id="mars" name="mars">
  <br>
  <input type="submit" id="button" value="Calculate">
</form>

1. Большое вам спасибо! Я был на правильном пути! Когда я вернулся, чтобы отредактировать код из статей, я пошел и изменил name на ID и вставил get элементы по id с формулами. Я думаю, что моей самой большой проблемой было выяснить, как вызвать функцию из формы. Я так привык к C , это так странно, что у них есть все эти правила для объединения кода.

2. Это так странно. Когда я запускаю этот код в своем редакторе, он не работает, но когда я нажимаю на фрагмент, он работает.

3. Обязательно ли использовать какие-либо специальные теги, которые не видны для этого скрипта

4. нет, это совсем не чистый javascript, также проверьте эту скрипку jsfiddle.net/Asifuzzaman/n3xh6294