解决方案

Question

我对Javascript相对较新，而且我在学校的一项任务中被要求使用3个输入框计算矩形棱镜的体积，第4个用于显示体积。我创建了一个函数并定义了我的变量并给每个输入框一个id，当我输入数字并通过我创建的函数运行它时，我一直得到NaN。究竟是什么引发了这个？

    <!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 length = $("length");
    var width = $("width");
    var height = $("height");
    var amountVolume = 0;
    function calculateVolume(length, width, height) {
        amountVolume = parseFloat(length) * parseFloat(width) * 
    parseFloat(height);
    var volumeRound = amountVolume.toFixed(2);
        $('volume').value = volumeRound;
    };


    </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="width" value="0"/>

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

        <input type="text" id="height" 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 />
    <input type="button" id="calculate" onClick="calculateVolume(length.value, width.value, height.value)" value="Calculate Volume"/>
   </form>
  </div>
</body>
</html>

Answer 1

首先，你不需要

 var length = $("length");
 var width = $("width");
 var height = $("height");

因为你正在传递onClick =＆＃34; calculateVolume（）＆＃34;

它无效，因为您使用的关键字为ID 高度和宽度，

这是完整功能的代码

<!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>
    var $ = function(id) {
        return document.getElementById(id);
    };

    // var length = $("length");
    // var width = $("width");
    // var height = $("height");

    var amountVolume = 0;
    function calculateVolume(length, width, height) {

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

    </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 />
    <input type="button" id="calculate" onClick="calculateVolume(length.value, widthData.value, heightData.value)" value="Calculate Volume"/>
   </form>
  </div>
</body>
</html>

Answer 2

问题在于height和width的范围，在输入的事件处理程序的上下文中执行。
每个input都有一个width和一个height属性，当您尝试传递该功能时，ID - width和ID - height实际上就是传递按钮width的{{1}}和height属性，这些属性都没有input键。这就是为什么你得到value的原因。

如果你想引用这些id的实际输入宽度，你应该通过window对象引用它们（所有元素id都是作用于窗口的）。

请参阅以下示例：

＆＃13;

undefined

＆＃13;

"use strict";
var $ = function(id) {
  return document.getElementById(id);
};

var length = $("length");
var width = $("width");
var height = $("height");
var amountVolume = 0;

function calculateVolume(length, width, height) {
  amountVolume = parseFloat(length) * parseFloat(width) *
    parseFloat(height);
  var volumeRound = amountVolume.toFixed(2);
  $('volume').value = volumeRound;
};

＆＃13;

Answer 3

解决方案

演示＃1 使用HTMLFormElement Interface of the Web API。请注意，变量已更改，HTML已使用语义和功能布局进行修改，以优化表单控件字段的使用。 演示1 监听输入事件，而不是按下按钮。只要输入数据，输入事件就会触发。

演示＃2 是OP代码的重构版本。

你剪切和粘贴的代码是jQuery。 jQuery是JavaScript，但JavaScript不是jQuery。如果不深入探讨jQuery的广泛而广泛的解释，我将通过简短的解释指出这些差异，这可能需要您进一步研究。

<小时/> 以下列表是错误：

<强> 1。单词length是一个内置的JavaScript属性，当浏览器将其视为var时，它被认为具有重新分配的变量（即未定义，因为字符串是不可变的。）

<小时/> 的 2。 $（）或jQuery（）

我认为当我看到这个时你不知道jQuery是什么：

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

...我不知道从哪一个开始...它是一个函数表达式，它与给定的#id绑定到对象上？

<小时/> 第3。要求：

将其放在<head>或</body>结束标记之前：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<小时/> 的 4。 jQuery / JavaScript对象

jQO（jQuery Object）是包装器$()中的JavaScript对象 JavaScript无法识别jQuery，因此大多数派生自jQuery库的方法都不能与JavaScript对象一起使用，反之亦然。如果您需要一个特定的jQuery对象作为JavaScript对象，那么您需要取消引用它：

方法A： jQuery .get()方法 - var X = $('#xID').get(0);

方法B： 支架通知 n - var X = $('#xID')[0]
<小时/> 5. $(" CSS SELECTOR ")

示例：

# - #id为#width的元素：$("#width")

. - 类.height的元素：$(".height")

- {tag} <a>的{{1}}
元素
$("a") - 属性为[]的元素：type="text"

第一个例子适用于：

$("[type=text]")

有几个原因导致无效：

不存在var length = $("length"); var width = $("width"); var height = $("height");，<length>或<width>元素。

jQuery对选择器使用CSS语法，因此<height>将是：var width = $("#width")

<强> 6。 jQuery / JavaScript函数/方法/属性

以下内容集中讨论了OP对财产<input type='text' id='width' value='0' min='0'>的使用所特有的问题。有两种主要方法可以直接设置/获取表单控件的值：

<强>的JavaScript --------------------------------------- --------------的的jQuery

.value

<input id='IN' type="number"> <output id='OUT'></output>属性----------------------------------------- - .value方法
<小时/> .val() ----------------- var dataIn = document.getElementById('IN').value;

var dataIn = $('#IN').val(); ---------------- document.getElementById('OUT').value = dataIn

鉴于我们现在对$('#OUT').val(dataIn)属性和.value方法的了解，我们现在知道可以通过将.val()替换为.value来解决以下错误。

//需要＃和.val（）......

.val()

};

演示1

＆＃13;
＆＃13;
$('volume').value = volumeRound;
＆＃13;
input, output { font: inherit; width: 6ch; } label { display: block; width: 6ch; margin: 0 0 12px 0; } fieldset { float: right; transform: translateY(-175px); margin-right: 25px; width: 12ch }
＆＃13;
＆＃13;
＆＃13;

演示2

＆＃13;
＆＃13;
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Surface Area & Volume</title> <style> </style> </head> <body> <main id="main"> <form id='AV'> <h1>Surface Area & Volume</h1> <label>Length: <input type="number" id="L" min="0" oninput='A.value = Number(L.value)*Number(W.value)'> </label> <label>Width: <input type="number" id="W" min="0" oninput='A.value = Number(L.value)*Number(W.value)'> </label> <label>Height: <input type="number" id="H" min='0' oninput='V.value = Number(A.value)*Number(H.value)'> </label> <fieldset> <label>Surface Area: <output id="A" for='W L'></output> </label> <label>Volume: <output id="V" for='A W L H'></output> </label> </fieldset> </form> </main> </body> </html>
＆＃13;
＆＃13;
＆＃13;

使用Javascript中的函数计算音量

3 个答案:

解决方案

演示1

演示2