OnChange не работает в моей функции onLoad для отображения правильных ответов

Question

OnChange не работает в моей функции onLoad для отображения правильных ответов

1

Я сделал html-документ, вычисляющий площадь поверхности и объем всего, что вводится в поля ввода в моем html-документе Height, Width и Length. Вместо того, чтобы использовать кнопку для запуска функций и давать ответы в поля ввода, обозначенные как "Площадь поверхности" и "Громкость" для ответов, я хотел использовать onload и сделать так, чтобы каждый раз при каждом изменении ввода выполнялись обе функции. Я новичок в Javascript, и метод, который был опробован ниже, просто оставляет экран пустым. Что именно заставляет ответы не отображаться в текстовых полях? Как я могу это решить?

<!doctype html>

<html>
<head>
<meta charset="utf-8">
<title>Surface Area &amp; Volume</title>
<link rel="stylesheet" type="text/css" href="/stylesheet.css">
</head>

<body>
<script>
"use strict";


    var $ = function(id) {
        return document.getElementById(id);
    };

    var amountVolume = 0;

    var length = $("length");
    var width = $("widthData");
    var height = $("heightData");
    var surfaceArea;
    var surfaceAreaArray = [];

    function output() {

     function calculateVolume(length, width, height) {
        amountVolume = parseFloat(length) * parseFloat(width) * parseFloat(height);
        var volumeRound = amountVolume.toFixed(2);
        $('volume').value = volumeRound;
    }

    function calculateSurfaceArea(length, width, height) {
        surfaceAreaArray[0] = parseFloat(length) * parseFloat(width) * 2;
        surfaceAreaArray[1] = parseFloat(length) * parseFloat(height) * 2;
        surfaceAreaArray[2] = parseFloat(height) * parseFloat(width) * 2;
        surfaceArea = surfaceAreaArray[0] + surfaceAreaArray[1] + surfaceAreaArray[2];
        var areaRound = surfaceArea.toFixed(1);
        $('area').value = areaRound;
    }

    }
window.onload = function() {

    $("length").onchange = output; 

    $("widthData").onchange = output;

    $("heightData").onchange = output;
}



</script>
 <div id="wrapper">
  <form>
    <h1>Surface Area & Volume</h1>

    <p>Length:

    <input type="text" id="length" value="0"/>

    </p>
    <br />
    <p>Width:

        <input type="text" id="widthData" value="0"/>

    </p>
    <br />
    <p>Height:

        <input type="text" id="heightData" value="0"/>

    </p>
    <br />
    <p class="change">Surface Area:

        <input type="text" id="area" disabled="disabled" />
    </p>
    <br />
    <p class="volume">Volume:

        <input type="text" id="volume" disabled="disabled" />
    </p>
    <br />
   </form>
  </div>
</body>
</html>

conner.maxey 15 окт. 2017, в 23:52

Источник

Теги:

javascript

html5

1 ответ

Ещё вопросы

tfogo · Answer 1 · 2017-10-15T20-13-00.000Z

Во-первых, output самом деле не вызывает calculateVolume или calculateSurfaceArea. Он просто определяет их. Поэтому каждый раз, когда вы меняете свой ввод, вы просто переопределяете некоторые функции и фактически ничего не запускаете.

Во-вторых, вам нужно передать значения входов в эти функции. var length = $("length"); получает весь элемент. Он должен стать var length = $("length").value; для получения фактических числовых значений.

Наконец, вы можете захотеть output() один раз в onload для того, чтобы output() поля поверхности и объема в 0.

Этот код должен работать:

var $ = function(id) {
  return document.getElementById(id);
};

function calculateVolume(length, width, height) {
  var amountVolume = parseFloat(length) * parseFloat(width) * parseFloat(height);
  var volumeRound = amountVolume.toFixed(2);
  $('volume').value = volumeRound;
}

function calculateSurfaceArea(length, width, height) {
  var surfaceAreaArray = [];
  surfaceAreaArray[0] = parseFloat(length) * parseFloat(width) * 2;
  surfaceAreaArray[1] = parseFloat(length) * parseFloat(height) * 2;
  surfaceAreaArray[2] = parseFloat(height) * parseFloat(width) * 2;
  var surfaceArea = surfaceAreaArray[0] + surfaceAreaArray[1] + surfaceAreaArray[2];
  var areaRound = surfaceArea.toFixed(1);
  $('area').value = areaRound;
}

function output() {
  var length = $("length").value;
  var width = $("widthData").value;
  var height = $("heightData").value;

  calculateVolume(length, width, height)
  calculateSurfaceArea(length, width, height)

}
window.onload = function() {

  $("length").onchange = output;

  $("widthData").onchange = output;

  $("heightData").onchange = output;

  output();
}

Вы говорите, что вы новичок в JavaScript. Вы должны пройти код выше, чтобы понять, почему он работает. Здесь представлено хорошее введение в функции, которые могут оказаться полезными: http://eloquentjavascript.net/03_functions.html