當檢查收音機框是否被選中時，將文本添加到文本框

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設置爲單選按鈕

，我也想知道什麼是最好的辦法不具有NaN的顯示出來，當你輸入任何值之前選擇毫升收音機。我在想if語句來檢查第一個框的值是否爲零，而不是運行convert函數。我在這裏接受創意。

這是我現在有，請記住，大約48小時前，我從來沒有使用Javascript工作JSFiddle

我所有的學習如何，如果你有關於這個問題讓任​​何良好的聯繫，這樣做是爲了我知道。

非常感謝您的幫助。我很感激。

Answer 1

見它在這裏的行動：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); 
    }); 
} 

其原因傳入事件偵聽器是這樣我們就可以元件被單擊的（對於盎司和毫升之間變化）的一個函數中確定

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」。

---

每評論EDITED

您可以添加多個事件偵聽器相同的元素，即使它調用這樣相同的功能：

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「事件，因此它將在文本框中更改數字時重新計算。我保留了「更改」事件處理程序，以便在單選按鈕上按預期工作。

Answer 2

在你的函數計算的，如果你讓這樣的條件：
if(a>0){ c = a/((b) + (1)); d = c*b; }
楠將dissapear。

對於頁面加載，您可以使用<body onload=" myFunction()">來執行您需要的功能。

Answer 3

這不是一個答案，更像是在宣傳思想 -

但是，既然你問的意見，我將對我的看法。

許多人在這裏會建議不要在學習javascript之前處理jQuery，但我不同意。我從jQuery開始並且在幾個小時內就工作良好，現在我正在填充設計大量網站後我錯過了javascript的內容。

這就是爲什麼你會喜歡學習jQuery在普通的JavaScript的例子：

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分鐘視頻TUTS：

TheNewBoston.com

或

phpAcademy.org

Answer 4

我也想知道當你輸入任何值之前選擇mL無線電時，沒有NaN的最佳方式顯示。

你可以簡單地避免楠使用了多種技巧，其中之一是使用||：

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

跳過parse方法：

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