Javascript条件文の呼び出し

Question

テーブルの「詳細」のチェックを実行する機能​​をどのように呼び出すことができますか？​​のif-elseステートメントは、「details」が「M」の場合は要素の背景色を「青」に戻し、そうでない場合は「F」の場合はピンクを返します。表示されているコードのように関数を呼び出そうとすると、機能しません。

JavaScriptのコード：

//table  
var table = [ 
"Lyn", "22", "F", 1, 1, 
"May", "32", "F", 18, 1, 
"Sam", "27", "F", 1, 2, 
"Sham", "23", "F", 2, 2, 
"Hrs", "22", "M", 13, 2 
]; 

// function calling starts here.. 

      for (var i = 0; i < table.length; i += 5) { 

       var element = document.createElement('div'); 
       element.className = 'element'; 

       var number = document.createElement('div'); 
       number.className = 'number'; 
       number.textContent = (i/5) + 1; 
       element.appendChild(number); 

       var symbol = document.createElement('div'); 
       symbol.className = 'symbol'; 
       symbol.textContent = table[ i ]; 
       element.appendChild(symbol); 

       var details = document.createElement('div'); 
       details.className = 'details'; 
       details.innerHTML = table[ i + 1 ] + '<br>' + table[ i + 2 ]; 
       element.appendChild(details); 
       element.CheckColour(details); /*help me check this */ 

       /*CheckColour function, help me check this too if there is any error*/ 
       function CheckColour() 
       { 
        var element, number, symbol, details; 

        if(details == "M") 
        element.style.backgroundColor = 'rgba(0,191,255,0)'; 
        else 
        element.style.backgroundColor = 'rgba(255,105,180,0)'; 
       } 

Answer 1

あなたの機能はelementための方法ではありませんので、あなたはelementにそれを呼び出すべきではありません。代わりにelementを関数に渡します。

また、detailsはDOM要素なので、"M"にはなりません。おそらくtable[i+2]と"M"を比較したいと思うかもしれません。

あなたはこのようにそれを行うことができます：ifの両方のブロックが同じプロパティに割り当てを行うため

CheckColour(element, table[i+2]); 

function CheckColour(element, details) { 
    element.style.backgroundColor = 
     details == "M" ? 'rgba(0,191,255,0)' : 'rgba(255,105,180,0)'; 
} 

これは、if ... elseの文の代替としてternary operator (? ... :)を使用しています。

functionの定義をループから外してください。それは一度定義する必要があります。

Answer 2

機能を抽出し、適切な変数を設定してアクションを実行することはどうでしょうか。

function CheckColour(element, details) { 
    if(details == "M") 
    element.style.backgroundColor = 'rgba(0,191,255,0)'; 
    else 
    element.style.backgroundColor = 'rgba(255,105,180,0)'; 
    } 

//table  
var table = [ 
"Lyn", "22", "F", 1, 1, 
"May", "32", "F", 18, 1, 
"Sam", "27", "F", 1, 2, 
"Sham", "23", "F", 2, 2, 
"Hrs", "22", "M", 13, 2 
]; 

// function calling starts here.. 

      for (var i = 0; i < table.length; i += 5) { 

       var element = document.createElement('div'); 
       element.className = 'element'; 

       var number = document.createElement('div'); 
       number.className = 'number'; 
       number.textContent = (i/5) + 1; 
       element.appendChild(number); 

       var symbol = document.createElement('div'); 
       symbol.className = 'symbol'; 
       symbol.textContent = table[ i ]; 
       element.appendChild(symbol); 

       var details = document.createElement('div'); 
       details.className = 'details'; 
       details.innerHTML = table[ i + 1 ] + '<br>' + table[ i + 2 ]; 
       element.appendChild(details); 

       // element.CheckColour(details); /*help me check this */ 
       CheckColour(element, details); 
       /*CheckColour function, help me check this too if there is any error*/ 


       var object = new THREE.CSS3DObject(element); 
       object.position.x = Math.random() * 4000 - 2000; 
       object.position.y = Math.random() * 4000 - 2000; 
       object.position.z = Math.random() * 4000 - 2000; 
       scene.add(object); 

       objects.push(object); 

       // 

       var object = new THREE.Object3D(); 
       object.position.x = (table[ i + 3 ] * 140) - 1330; 
       object.position.y = - (table[ i + 4 ] * 180) + 990; 

       targets.table.push(object); 

      }