Javascript：できるだけ効率的にやっていますか？

Question

これは私の最初の投稿です。新しいコーディングです。これは、オブジェクトを使った私の最初の小さなプロジェクトです。私はこれを遠くにやっているのか、これが実際に私の目標を達成する最も速い方法なのか、私に教えてくれる専門家の目が必要です。ボタンがクリックされたときに、これは現在の情報を表示する私のgoal.itsを達成された今

<li> Name: <a id=name> </a> </li> 
    <li> Age: <a id=age> </a> </li> 
    <li> Instrument: <a id=horn> </a> </li> 

    <script> 
function cat(name,age,horn) { 
    this.name = name; 
    this.age = age; 
    this.horn = horn; 
    } 

    var milesD = new cat("Miles Davis",75,"trumpet"); 


    catName = document.getElementById("name"); 
    catAge = document.getElementById("age"); 
    catHorn = document.getElementById("horn"); 

     function milesFunction() { 

      catName.innerHTML = milesD.name; 
      catAge.innerHTML = milesD.age; 
      catHorn.innerHTML = milesD.horn; 

}

： は、私は単にHTMLのリストに情報を表示していまし押されたボタンを作りたかったです。私は、全体のディレクトリを作成した場合

 function coltraneFunction() { 
      catName.innerHTML = johnC.name; 
      catAge.innerHTML = johnC.age; 
      catHorn.innerHTML = johnC.horn; 

：私は自分自身は、同じ機能の多くを再書き込み見つける

var johnC = new cat("John Coltrane",41,"saxophone"); 

：私は、同じ目標を持つ新しいオブジェクトを追加 しかし、このタイプのオブジェクト/関数の関係、私は自分の時間を節約するためにforループを作ることができるか、これを行う唯一の方法ですか？

おかげ

Answer 1

あなたはそのコードを繰り返す必要はありません。引数を指定して関数を作成し、それを再利用します。

catName = document.getElementById("name"); 
catAge = document.getElementById("age"); 
catHorn = document.getElementById("horn"); 


function update(obj) { 
    catName.innerHTML = obj.name; 
    catAge.innerHTML = obj.age; 
    catHorn.innerHTML = obj.horn; 
} 

var milesD = new cat("Miles Davis",75,"trumpet"); 
update(milesD); 

var milesE = new cat("Miles Edison",100,"ABC"); 
// Just call update function with new object. 
update(milesE);