选中单选框时，将文本添加到文本框中

请在此处查看它的实际操作：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错误，并根据要求添加"oz"或"ml"。

根据评论编辑

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

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);
    });
}

在这里，我添加了"keyup"事件，这样它将在文本框中更改数字时重新计算。我保留了"更改"事件处理程序，以便它能在单选按钮上按预期工作。

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

但是，既然你征求意见，我就把我的观点强加于人。

这里的许多人会建议在学习javascript之前不要处理jQuery，但我不同意。我从jQuery开始，在几个小时内就取得了成效，在设计了许多网站后，我现在正在填补我对javascript的遗漏。

下面是一个示例，说明为什么您可能更喜欢学习jQuery而不是简单的javascript:

jsFiddle演示

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分钟视频教程：

NewBoston.com

或

phpAcademy.org

我也在想，当你在输入任何值之前，请选择"mL"单选框。

你可以简单地通过使用几个技巧来避免NaN，其中之一是使用||:

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

跳过分析方法：

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

在函数calc中，如果您设置这样的条件：
if(a>0){ c = a/((b) + (1)); d = c*b; }
NAN将解散。

对于页面加载，您可以使用<body onload=" myFunction()">来执行您需要的函数。