calcによるJavaScript関数の補助

こんにちは私は加算または減算によって合計を計算するスクリプトを作成しようとしています。私が取り組んでいる問題は、現在使用しているJavaScriptで、見つかったJavaScriptは、「開始量」フィールドと「金額」フィールドのいずれか一方だけで同時に動作することです。たとえば、開始金額で50を入力し、請求額フィールドに50を入力すると、それが計算されます。行を追加して金額を入力すると、金額フィールドのいずれかに入力された金額に基づいて金額が調整されます。calcによるJavaScript関数の補助

なぜコードはjsfiddleでは機能しませんが、このjsFiddleのコードを見ることができます。

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<title>Finance</title> 
<meta charset="UTF-8"> 
<meta name="finance" content="width=device-width, initial-scale=1.0"> 
<style> 


table { 
padding-top: 15px; 
} 

td { 
white-space: nowrap; 
} 

button { 
cursor: pointer; 
} 

</style> 
</head> 

<body> 

<h1>Financial Keeps</h1> 

<p><b>Starting Amount: &#36; <input type="number" id="startAmt" name="startAmt" onkeyup="calc(this)"/></b></p> 

<p>To subtract an amount place a minus (-) sign infront of the dollar amount.</p> 

<button onclick="insertRow()" id="addRow" >Add Row</button> 

<!--<button onclick="removeRow()" id="delRow" >Delete Row</button>--> 

<table id="myTable"> 
<tr> 
    <th>Bill Info</th> 
    <th>Bill Amount</th> 
    <th>Date</th> 
    <th>Comment</th> 
</tr> 
<tr> 
    <tr> 
    <td><input type="text" id="billInfo"></td> 
    <td><input type="number" id="billAmt" name="number" onkeyup="calc(this)"></td> 
    <td><input type="date" id="date"></td> 
    <td><input type="text" id="commentBox"></td> 
    <!--<td><input style="cursor: pointer;" type="button" id="delBtn" value="Delete" onclick="removeRow(this)"></td>--> 
</tr> 
</table> 

    <input type="hidden" id="total" name="total" value="0" /> 
    <p><b>Ending Amount: &#36; <span id="totalAmt">0</span></b></p> 

    <script type="text/javascript"> 
function insertRow() { 
var x = document.getElementById("myTable"); 
var row = x.insertRow(x.rows.length); 

    var cell = row.insertCell(0); 
    var a = document.createElement("input"); 
     a.setAttribute("type","text"); 
     cell.appendChild(a); 

    var cell1 = row.insertCell(1); 
    var b = document.createElement("input"); 
     b.setAttribute("type","number"); 
     b.setAttribute("id","billAmt"); 
     b.setAttribute("name","number"); 
     b.setAttribute("onkeyup","calc(this)"); 
     cell1.appendChild(b); 

    var cell2 = row.insertCell(2); 
    var c = document.createElement("input"); 
     c.setAttribute("type","date"); 
     cell2.appendChild(c); 

    var cell3 = row.insertCell(3); 
    var d = document.createElement("input"); 
     d.setAttribute("type","text"); 
     cell3.appendChild(d); 

    var cell4 = row.insertCell(4); 
    var e = document.createElement("button"); 
     e.innerText = "Delete"; 
     e.setAttribute("id","delBtn"); 
     e.setAttribute("onclick","removeRow(this)"); 
     cell4.appendChild(e); 
} 

function removeRow(elem) { 
var table = elem.parentNode.parentNode.parentNode; 
var rowCount = table.rows.length; 
var row = elem.parentNode.parentNode; 
row.parentNode.removeChild(row); 
} 

var x = 0; 
var y = 0; 
var z = 0; 
function calc(obj) { 
var e = obj.id.toString(); 
if (e == 'startAmt') { 
x = Number(obj.value); 
y = Number(document.getElementById('billAmt').value); 
} else { 
    x = Number(document.getElementById('startAmt').value); 
    y = Number(obj.value); 
    } 
    z = x + y; 
    document.getElementById('total').value = z; 
    document.getElementById('totalAmt').innerHTML = z; 
} 
</script> 
</body> 
</html>

結果私が取得：

出典

2017-03-13 Mark White

_理由はわかりませんが、コードがJSFiddleで機能しない "_ - [wrapメソッドを' ']（http://stackoverflow.com/q/7043649/4642212）に設定する必要があるためです。 – Xufox

同じIDを持つ複数の要素を持つように見えます。 'document.getElementById（ 'billAmt'）'と言って、それらのうち10個を見つけたら、どちらを返すべきですか？たぶん私が最初に見つけたものだけ？それについて考える。 – csmckelvey

また、 'window.calc = function（obj）{' –

は、ここであなたが達成したいものの簡略化working CodePenです。

問題については、少し違った考えがあります。速いパフォーマンス（calc(this)を使用）を重視しているようですが、問題を解決する方法はずっと簡単ですが、それでも優れたパフォーマンスが得られます。

ここに私のCodePenからの抜粋です：

function calc() { 
    var money = parseInt(document.querySelector('#money').value) || 0; 
    var bills = document.querySelectorAll('table tr input.billAmt') ; 
    var billTotal = 0; 

    for (i = 0; i < bills.length; i++) { 
     billTotal += parseInt(bills[i].value) || 0; 
    } 

    totalAmt.innerHTML = money - billTotal; 
}

var money...とvar bills...はちょうどDOMからinput秒をつかみます。 billTotalは、あなたが請求書で借りている金額です。 for...は入力（この場合はすべての請求書）の配列（技術的にノードリストなど）をループし、入力のvalueをbillTotalに追加します。最後のコード行は、billTotalを画面にレンダリングするだけです。

を編集：上記のCodePenリンクを更新しました。これは、1行につき複数の入力フィールドで機能します。 table tr inputをcalc()のtable tr input.billAmtに、をaddBill()に変更しました。またをcalc()に追加したので、入力番号フィールドを空白のままにした場合はNaNが得られません。また、私はdescriptionフィールドをaddBill()に追加して、複数の入力フィールドで動作することを証明しました。

編集2私はCodePenを更新しました。それは多くの、より柔軟だ以外

var deleteBtn = document.createElement('button'); 
deleteBtn.innerHTML = "Delete"; 
deleteBtn.addEventListener("click", removeRow); 
deleteBtn.addEventListener("click", calc);

addEventListener基本的にonclickと同じことを行います。私はこれを追加しました。ここでの注文は重要です。行を削除したい場合は、新しいのコストを計算します。それ以外の場合は、古いのコストを計算します。呼び出されたときにremoveRow基本的に、それはeで呼び出されます

function removeRow(e) { 
    e.target.parentNode.remove(); 
}

それは、クリックイベントから呼び出されたため、パラメータとして（私はそれevent、または何かを呼ばれたかもしれない）：

は私もこれを追加しました（または任意のイベント）。 eには、e.targetのような有用な情報が含まれています。これはクリックされた要素を参照します。.parentNode.remove();はかなり自明です。

出典

2017-03-13 19:03:14

ちょっと@GabeRoganコードは1つのセルしか持っていないときに動作しますが、1つ以上のセルがあるときは好きではないようです。私の計算機能を使って私の仕事をどうすればできますか？ありがとう。 –

申し訳ありませんがあいまいですが、私は行ごとに複数のセルを追加することに言及しています。あなたのコードは1行に1つのセルを持っていますが、動作しますが、実際にボタンである5番目のセルで合計5個のセルが必要です。 –

@MarkWhite入手しました。私はそれに応じて私の答えを更新します。 –

calcによるJavaScript関数の補助

答えて

関連する問題