Question

我正在尝试为自己制作一个小项目，以便更好地理解javascript。不想成为专家只是有一个更好的理解。

我正在制作稀释计算器，我想知道将单位（oz或mL）插入输入框并根据是否选择了无线电输出div的最佳方法。我希望这能自动发生在页面加载以及收音机的更改上。

<div class="input-group input-margin-top">
  <input type="text" id="containersize" class="form-control" value="0" onclick="this.select();">
  <span class="input-group-addon">
    <input type="radio" name="inlineRadioOptions" id="ounces" checked> oz
  </span>
  <span class="input-group-addon">
    <input type="radio" name="inlineRadioOptions" id="millilitres"> mL
  </span>     
</div>

以下是我如何设置单选按钮的HTML设置

我也想知道在输入任何值之前选择mL无线电时，没有出现NaN的最佳方法是什么。我在想一个if语句来检查第一个框的值是否为零而不是不运行convert函数。我愿意接受这些想法。

以下是我目前的情况，请记住，大约48小时前我从未使用过Javascript JSFiddle

我全都是为了学习如何做到这一点，所以如果你有关于这个主题的任何好的链接，请告诉我。

非常感谢你的帮助。我很感激。

Answer 1

这不是一个答案，更像是意识形态的宣传 -

但是，既然你提出了建议，我会强加我的意见。

许多人会在学习javascript之前建议不要处理jQuery，但我不同意。我从jQuery开始，并在几个小时内工作，我现在正在填写我设计了许多网站后我错过的javascript。

以下是您可能更喜欢通过简单的javascript学习jQuery的原因示例：

jsFiddle Demo

jQuery方式：

// Event Listener to make everything automatic
$('#containersize, #dilution').keyup(function(){
    a = parseFloat($("#containersize").val() );
    b = parseFloat($("#dilution").val() );
    c = a / ((b) + (1));
    d = c * b;
    $("#concentrateresults").html( c.toFixed(1) );
    $("#waterresults").html( d.toFixed(1) );
});

// Event Listener to change the units
$('#ounces, #millilitres').click(function(){
    btn = this.id;
    a = parseFloat($("#containersize").val());
    b = parseFloat($("#concentrateresults").html() );
    c = parseFloat($("#waterresults").html() );
    if (btn=='ounces'){
        d = a / (29.5735)
        e = b / (29.5735)
        f = c / (29.5735)
    }else{
        d = a * (29.5735)
        e = b * (29.5735)
        f = c * (29.5735)
    }
    $("#containersize").val(d.toFixed(1) );
    $("#concentrateresults").html( e.toFixed(1) );
    $("#waterresults").html( f.toFixed(1) );
});

使用jQuery方式更少打字 - 特别是在整个项目中。此外，jQuery还会为您处理所有跨浏览器问题。使用javascript，您必须自己为每个浏览器编码。对于大多数开发人员来说，jQuery更快更容易。

注意：在使用jQuery命令之前，必须在页面上包含jQuery库 - 通常在HEAD标记之间，如下所示：

<head>
    <!-- other stuff in head -->
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>

如果您使用CDN加载jQuery，如上例所示，它可能已经从其他网站预先加载。

如果您想在jQuery上学习一些快速课程，请在此处找到免费的10分钟视频：

TheNewBoston.com

或

phpAcademy.org

Answer 2

在此处查看此行动：https://jsfiddle.net/7dhyue0p/1/

我在整个代码中添加了评论，因此您可以了解每一步的发生情况。如果有任何您感到困惑或不确定的事情，请不要犹豫，我很乐意提供帮助。

注意：我强烈建议在使用任何库（如jQuery）之前至少学习JavaScript的基础知识

function calculate(event) {

    // Get the container size
    var containerSize = parseFloat(document.getElementById("containersize").value);

    // Get the dilution
    var dilution = parseFloat(document.getElementById("dilution").value);

    // Calculate the concentrate result
    var concentrateResult = containerSize / ((dilution) + (1));

    // Calculate the water result
    var waterResult = concentrateResult * dilution;

    // Get an array of all of the radio elements in "inlineRadioOptions"
    var radios = document.getElementsByName("inlineRadioOptions");

    // Declare the variable "unit" to hold the name of the unit
    var unit;

    // Loop through the radio buttons
    for (var i = 0; i < radios.length; i++) {

        // If this radio button is checked
        if (radios[i].checked) {

            // Assign the value of the radio button to the variable "unit"
            unit = radios[i].value;
        }
    }

    // Find the value of the element that was clicked - if the value is "oz"...
    if (event.target.value === "oz") {
        // Update your elements
        document.getElementById("containersize").value = (containerSize / (29.5735)).toFixed(1) + unit;
        document.getElementById("concentrateresults").innerHTML = (concentrateResult / (29.5735)).toFixed(1) + unit;
        document.getElementById("waterresults").innerHTML = (waterResult / (29.5735)).toFixed(1) + unit;
    } else if (event.target.value === "ml") {  // Repeat for "ml"
        document.getElementById("containersize").value = (containerSize * (29.5735)).toFixed(1) + unit;
        document.getElementById("concentrateresults").innerHTML = (concentrateResult * (29.5735)).toFixed(1) + unit;
        document.getElementById("waterresults").innerHTML = (waterResult * (29.5735)).toFixed(1) + unit;
    } else {  // Otherwise, if this function wasn't triggered by changing the radio button...
        document.getElementById("containersize").value = containerSize.toFixed(1) + unit;
        document.getElementById("concentrateresults").innerHTML = concentrateResult.toFixed(1) + unit;
        document.getElementById("waterresults").innerHTML = waterResult.toFixed(1) + unit;
    }
};

// Event Listener to make everything automatic
// Get an array of every input
var inputs = document.getElementsByTagName("input");

// Loop through the inputs
for (var i = 0; i < inputs.length; i++) {

    // Add an event handler for each input
    inputs[i].addEventListener("change", function (event) {
        // Capture the event and pass it into the calculate() function
        calculate(event);
    });
}

我改变了你在那里的很多代码。

我将所有内容合并到calculate()函数中以使其可重复。

首先 - 在JavaScript中编码时 - 命名变量，以便了解它们是什么。使用任意字母作为变量不是一个好主意。您应该能够阅读代码并了解正在进行的操作。

第二 - 我在页面的所有输入上添加了一个事件监听器，并捕获事件以传递到calculate()函数。

var inputs = document.getElementsByTagName("input");

for (var i = 0; i < inputs.length; i++) {
    inputs[i].addEventListener("change", function (event) {
        calculate(event);
    });
}

传递事件监听器的原因是我们可以在一个函数中确定单击哪个元素（用于在oz和ml之间进行更改）

if (event.target.value === "oz") {
    document.getElementById("containersize").value = (containerSize / (29.5735)).toFixed(1) + unit;
    document.getElementById("concentrateresults").innerHTML = (concentrateResult / (29.5735)).toFixed(1) + unit;
    document.getElementById("waterresults").innerHTML = (waterResult / (29.5735)).toFixed(1) + unit;
} else if (event.target.value === "ml") {
    document.getElementById("containersize").value = (containerSize * (29.5735)).toFixed(1) + unit;
    document.getElementById("concentrateresults").innerHTML = (concentrateResult * (29.5735)).toFixed(1) + unit;
    document.getElementById("waterresults").innerHTML = (waterResult * (29.5735)).toFixed(1) + unit;
} else {
    document.getElementById("containersize").value = containerSize.toFixed(1) + unit;
    document.getElementById("concentrateresults").innerHTML = concentrateResult.toFixed(1) + unit;
    document.getElementById("waterresults").innerHTML = waterResult.toFixed(1) + unit;
}

此功能还可以消除您的NaN错误，并且还会添加＆＃34; oz＆＃34;或＆＃34; ml＆＃34;按要求。

根据评论编辑

您可以向同一元素添加多个事件侦听器，即使它调用相同的函数，如下所示：

var inputs = document.getElementsByTagName("input");
    for (var i = 0; i < inputs.length; i++) {
        inputs[i].addEventListener("keyup", function (event) {
        calculate(event);
    });
    inputs[i].addEventListener("change", function (event) {
        calculate(event);
    });
}

在这里，我添加了＆＃34; keyup＆＃34;事件，因此它会在文本框中更改数字时重新计算。我保持了＃34;改变＆＃34;事件处理程序，因此它将在单选按钮上按预期工作。

Answer 3

我也想知道当你没有出现NaN时最好的方法是什么在输入任何值之前选择mL无线电。

你可以通过使用几个技巧来避免使用NaN，其中一个使用||：

parseFloat(""); //         <-- NaN
parseFloat("") || 0; //    <-- 0
parseFloat("foo") || 0; // <-- 0

跳过解析方法：

+("") || 0; //             <-- 0
+("3") || 0; //            <-- 3
+(".003") || 0; //         <-- 0.003

Answer 4

在你的函数calc中，如果你做了这样的条件：
if(a>0){ c = a/((b) + (1)); d = c*b; }
NAN将消失。

对于页面加载，您可以使用<body onload=" myFunction()">执行所需的功能。

检查是否选中了单选框时，在文本框中添加文本

4 个答案: