JavaScriptのdivから値を取得できません

Question

VATなしで金額をVATで事前計算された金額から計算しようとしています。 HTMLフォームは、次のようになります。

<table> 
     <tr> 
      <th>Sl No</th> 
      <th>Description of goods</th> 
      <th>Price</th> 
      <th>VAT%</th> 
      <th>Price with VAT</th> 
      <th>Quantity</th> 
      <th>Amount</th> 
     </tr> 

    {foreach name = feach item = k from = $ip key = ind} 
     <tr> 
      <td>{$ind+1}</td> 
      <td>{$k->brand},{$k->model}</td> 
      <td id="prd_prc">&nbsp;</td> 
      <td id="vat{$ind}"> 
       <select name="vatpc" id="vatpc" onchange="calculate('{$ind}')"> 
        <option value="5">5</option> 
        <option value="13.5">13.5</option> 
       </select> 
      </td> 
      <td id="total_cost{$ind}">{$k->price}</td> 
      <td>{$k->quantity}</td> 
      <td>{$k->total_cost}</td> 
     </tr> 
    {/foreach} 
     <tr> 
      <td>&nbsp;</td> 
      <td>&nbsp;</td> 
      <td>&nbsp;</td> 
      <td>Total Cost </td> 
      <td>{$final_amount}</td> 
     </tr> 
    </table> 

とJavaScript関数は次のとおりです。

function calculate(idno) 
{ 
    //alert(idno); 
    var vat_pc = document.getElementById("vatpc").value; 


    var total_cost = document.getElementById("total_cost"+idno).value; 

    //total_cost = Number(total_cost); 
    alert(total_cost); 

    //vat_pc = parseFloat(vat_pc); 
    // = v + 2.10 + 11.25; 
    //alert(v); 
    // document.getElementById("total").innerHTML = "Total - amount : "+v+" USD"; 
} 

しかし、警告がundefinedを示しています。私はinnerHTMLを追加しようとしましたが、結果は同じです。助けてください。事前に感謝

Answer 1

total_costXは<td>要素です。 textContentプロパティを使用します。

var total_cost = document.getElementById("total_cost"+idno).textContent; 

Answer 2

ダイビングの価値はまったくありません。しかし、ダイブの中でテキストやHTMLを得ることができます。あなたはjqueryのを使用している場合、それは非常に簡単でなければなりません：。

$(document.getElementById("vatpc")).text(); 
//OR 
$(document.getElementById("vatpc")).html(); 

またはjQueryの道

$（ "＃のvatpc"）、テキスト（）; // OR $（ "＃vatpc"）.html（）;