如何添加和使用Div作爲使用Javascript的總計算器？

我需要做一個函數來計算用戶輸入的總和，並將它與以前給定的值進行比較，並將結果返回給用戶。如何添加和使用Div作爲使用Javascript的總計算器？

例如你之前說過你每週吃20餐，但你目前列出了5份晚餐，7份午餐和36份早餐。這共計48餐。

到目前爲止，我可以讀取我的輸入並將它們添加到變量中作爲響應者輸入它，在已經存在的div中顯示此變量。但我需要創建一個div來顯示它，因爲它是實際使用的。這是我遇到問題的地方，因爲我無法獲得此代碼的工作。

注意我是JS新手，所以我的一些代碼可能沒有任何意義。這一切到目前爲止，我已經得到了，註釋掉位是什麼原因造成的麻煩，其餘的（假設我有ID'd爲「輸出」一個div）正常工作：

<html> 
<head> 
<script> 
    var count = 0; 
    function summer() { 
     var num1 = (parseFloat(document.getElementById("number1").value)) || 0; 
     var num2 = (parseFloat(document.getElementById("number2").value)) || 0; 
     var num3 = (parseFloat(document.getElementById("number3").value)) || 0; 
     count = num1+num2+num3; 
    // if(!document.getElementById("output")) { 
    //  var newDiv = document.createElement('div'); 
    //  var divIdName = 'output'; 
    //  var myDiv = document.getElementById('buttoner'); 
    //  var content = document.createTextNode("") 
    //  newDiv.setAttribute('id',divIdName); 
    //  newDiv.appendChild(content); 
    //  document.body.insertBefore(newDiv, myDiv) 
    //  }; 
     document.getElementById("output").innerHTML = "Your running total = "+count 
}; 
</script> 
</head> 
<body> 
<input type="text" id="number1" onKeyUp="summer()" name="number" /> 
<input type="text" id="number2" onKeyUp="summer()" name="number" /> 
<input type="text" id="number3" onKeyUp="summer()" name="number" /> 
<div id='Buttoner'> 
<button type="button" onclick="summer()">Clicking here adds your input to the "count" variable</button> 
</div> 
<br> 
</body> 
</html>

謝謝！

編輯：可能值得注意的是，'buttoner'div是從前一階段的實驗中遺留下來的，現在被用作插入新div的地標。

來源

2013-12-16 Scironic

代碼工作正常，我只是在W3schools運行它顯然是廢話。感謝您的幫助！ – Scironic

試試這個小提琴：

http://jsfiddle.net/Q65BT/

var pre =0; 
var count = 0; 
function summer(a) { 
    var num1 = (parseFloat(document.getElementById("number1").value)) || 0; 
    var num2 = (parseFloat(document.getElementById("number2").value)) || 0; 
    var num3 = (parseFloat(document.getElementById("number3").value)) || 0; 
    if(a==1) 
    { 
    pre=count; 
    count = num1+num2+num3; 
    document.getElementById("output").innerHTML = "You previously said you eat "+pre+" meals a week but you have currently listed "+num1+" Dinners, "+num2+" Lunches and "+num3+" Breakfasts. This totals "+count+" meals."; 
} 
}

來源

2013-12-16 13:26:10 Zword

感謝您的評論！同上，雖然，我得到了添加功能工作得很好。但我需要能夠創建一個div來將其添加到（由於無法在我正在使用的程序中完成）。問題是評論出來的一點對我來說根本不起作用。令人討厭的是我只是在JSfiddle中嘗試了我的代碼，它完美地工作。不要再使用W3School。 – Scironic

你的問題對我來說似乎很簡單。如果這真的是你所有的HTML，你唯一的問題是你沒有output股利。

你可以在某些方面解決這個問題。使用純JavaScript ...

var output = document.createElement("div"); // Creates a <div> element 
output.innerHTML = "Your running total = " + count; 
document.body.appendChild(output); // Add the <div> to the end of the <body>

另一種方法是把output DIV在HTML，這樣你甚至不需要改變你的腳本：

<div id="output"></div>

如果你想在output在輸入之前不可見，你可以CSS這一點...

<div id="output" style="display: none;"></div>

，並使其使用Javascript可見只要你想。

var output = document.getElementById('output'); 
output.style.display = 'block'; // or 'inline-block', or 'inline', etc. See what fits you better

當你使用Javascript beginnning，我建議你在正確的道路開始通過讀取unobstrusive的JavaScript。如果你願意，我可以用一些不錯的JS更新答案。

UPDATE：如果您想用新outputdiv來替代buttondiv，你可以簡單地改變從output的名字button/buttoner/whatever you want。

UPDATE 2：好像我沒有正確理解你的問題。如果你想存儲以前的答案，你也可以通過多種方式來完成。

一種是將當前答案存儲在隱藏字段中。例如...

<input type="hidden" id="prevAnswer" value="0" />

然後，在你的Javascript，你可以做這樣的：

var prevAnswer = document.getElementById("prevAnswer") 
var prevAnswerValue = parseFloat(prevAnswer.value) || 0; 
output.innerHTML = "You previously said you eat " + prevAnswerValue + " meals a week but you have currently listed " + num1 + " Dinners, " + num2 + " Lunches and " + num3 + " Breakfasts. This totals " + count + " meals."; 
prevAnswer.value = count;

那麼你將永遠有以前的答案，只要你計算出一個新的。

來源

2013-12-16 13:23:02

感謝您的迴應！對於前兩部分，我知道我可以在輸出div中直接放入代碼，但是我使用的程序會生成它自己的html，我不能以這種直接方式影響（或者至少我不知道如何）。然而，我可以用JavaScript來操縱它，這就是爲什麼我需要使用javascript來插入一個新的div而不是操作那個已經存在的。 – Scironic

明白了。正如我所說，讀一讀Unobstrusive Javascript是因爲你是初學者：你會發現你可以用更好的方式做很多事情，並且避免你的代碼隨着它的發展而變成意大利麪條。 –

我不知道你錯過了什麼行爲。當我取消該塊的評論時，它seems to work fine。如果它尚不存在，新的DIV即時創建。

該代碼是比必要的字眼，但如果你說，你是一個初學者，這不是一件壞事。這裏有一些可能的清理：

if (!document.getElementById("output")) { 
    var newDiv = document.createElement('div'); 
    newDiv.setAttribute('id', 'output'); 
    var myDiv = document.getElementById('buttoner'); 
    document.body.insertBefore(newDiv, myDiv) 
};

來源

2013-12-16 13:30:42

我在使用W3schools測試我的代碼時做了一個糟糕的選擇... – Scironic

那麼，這是學習的難題，但您可能不會忘記它！ –

如何添加和使用Div作爲使用Javascript的總計算器？

回答

相關問題