0

我正在尝试学习如何使用 JS 来为我正在开发的网站创建单位转换器。
我确实打算尝试使用 PHP 来完成它，但有人指出它会效率低下，所以我现在正在尝试学习 JS 来执行相同的任务。

我写了一个非常小的测试函数来添加两个数字，它工作得很好。然后我稍微调整它以接收更多参数并检查几个条件，再次工作正常 - 我创建了一个新对象并直接传递变量。

我现在需要将表单中的值传递给这个函数，以便计算总和并输出结果。我不断收到“未定义”的错误。我已经用谷歌搜索并阅读了，但似乎找不到解决方案。

到目前为止，我有：

<script type="text/javascript">

    function Convert(from, to, units){

        this.from = $("#from").val();
        this.to = $("#to").val();
        this.units = $("#units").val();
    }

    Convert.prototype.convertThem = function(){

        if(this.from == "degC"){
            if(this.to == "degF"){
                return this.units * 347956757524;
            }
        }
    }

    calcTempTest = new Convert(this.from, this.to, this.units);
    alert(calcTempTest.convertThem());
    console.log(calcTempTest);

</script>

谁能告诉我我做错了什么？'to'、'from' 和 'units' 是表单中的 id。

表格：

<div class="form">
        <label for="units">Units:</label>
        <input type="text" name="units" id="units" class="required digits"  />
    </div>

    <div class="form">
        <label for="from">Convert From:</label>
            <select name="from" id="from">
                <option value="from">-Select an Option-</option>
            </select>
    </div>

    <div class="form">
        <label for="to">Convert Into:</label>
        <select name="to" id="to">
            <option value="to">-Select an Option-</option>
        </select>
    </div>

    <div class="form">
        <label> &nbsp; </label>
        <input type="submit" name="submit" value="Convert!" />
    </div>

非常感谢。

4

3 回答 3

1

解释

您select选择option的 onLoad 值都是“从”和“到”。由于这些不等于“degF”和“degC”，因此您的分配将不会继续，因此结果变量将是未定义的，因为不会为其分配任何值。

解决方案

添加几个option到您的选择或更改它们的默认值。我还在输入中添加了一个默认值。

HTML

<input type="text" name="units" id="units" value="12" class="required digits"  />

<option value="degC">-Select an Option-</option>

<option value="degF">-Select an Option-</option>

编辑

我在这里添加了一个 JSFiddle，它在单击按钮时执行脚本，并对JavaScript 进行了以下修改：

注意：我还添加了真正的公式。

JavaScript/jQuery

 $('input[name="submit"]').click(function () {
    var c = new Convert();
    alert(c.convertThem());
});

function Convert() {

    this.from = $("#from").val();
    this.to = $("#to").val();
    this.units = $("#units").val();
}

Convert.prototype.convertThem = function () {

    if (this.from == "degC") {
        if (this.to == "degF") {
           return this.units * 1.8 + 32;
        }
    }
}
于 2013-07-04T13:50:52.787 回答
0

您的代码有几个问题。大多数问题已在接受的答案中得到解决，但我想提供更多见解，以帮助您在未来创建更多可重用的代码。

由于我已经用自己的示例创建了一个jsfiddle，因此浪费它会很可惜，所以无论如何我都会发布它并附上一些评论。

使用构造函数参数

function Convert(from, to, units, res){
    this.from = from;
    //etc...
}

将参数传递给对象的构造函数（并使用它们）使其更具可重用性。您没有使用传递的参数，并且选择的答案使用了我认为是您的原始解决方案（在构造时将元素值硬编码到对象中）。

这样，您可以在同一页面上拥有转换器的多个实例，您可以将其代码放在外部文件中，因为它变得更加复杂，并且只将实例化逻辑放在页面本身中（如果您的页面结构发生变化，则不需要要更改外部文件，只需更新提供的构造函数参数）。

存储节点引用而不是值

我想指出的另一件事是计算的完成方式。

您的实现需要为每个计算创建一个新对象。Converter我发现创建单个并仅在需要时获取值要好得多。这就是我存储对表单字段 DOM 节点的引用并且没有存储它们的值的原因。

$("#btnConvert").click(calcTempTest.convertThem.bind(calcTempTest));

我bind(...)在点击附件中使用来保留对象的范围。

祝你好运！

于 2013-07-04T14:51:24.183 回答
0

我认为当您创建转换对象时，您会尝试传递不存在的变量：

calcTempTest = new Convert(this.from, this.to, this.units);

我很确定this那时代表 window 并且 windw.from 是未定义的。无论如何，您似乎没有对这些值做任何事情，因此您可以将其更改为：

calcTempTest = new Convert();

也许以下答案可以帮助您了解thisJS 中的含义：原型继承 - 编写

这是一些最低限度的工作代码：

<!DOCTYPE html>
<html>
<head>
    <title>test</title>
    <script type="text/javascript" src="jquery-1.10.1.js"></script>
</head>
<body>


<div class="form">
        <label for="units">Units:</label>
        <input type="text" name="units" id="units" class="required digits"  />
    </div>

    <div class="form">
        <label for="from">Convert From:</label>
            <select name="from" id="from">
                <option value="degC">degC</option>
            </select>
    </div>

    <div class="form">
        <label for="to">Convert Into:</label>
        <select name="to" id="to">
            <option value="degF">degG</option>
        </select>
    </div>

    <div class="form">
        <label for="output">Output:</label>
        <input type="text" id="output" />
    </div>

    <div class="form">
        <label> &nbsp; </label>
        <input type="submit" id="subm" name="submit" value="Convert!" />
    </div>
<script type="text/javascript">
    (function () {
        function Convert(from, to, units) {
            // when convert is created set a reference to the input elements
            this.$from = $("#from");
            this.$to = $("#to");
            this.$units = $("#units");
            this.$output = $("#output");
        }

        Convert.prototype.convertThem = function () {
            // this.$... is a jQuery object containing the input elements
            if (this.$from.val() == "degC") {
                if (this.$to.val() == "degF") {
                    this.$output.val( this.$units.val() * 347956757524);
                }
            }
        }

        calcTempTest = new Convert();
        $("#subm").on("click", null, null, function () {
            calcTempTest.convertThem();
        });
    })();//anonymous funciton, no variables in global scope
</script>
</body>
</html>
于 2013-07-04T13:50:50.940 回答