JavaScriptマトリックス

Question

数字が1〜9の3 x 3ランダム化マトリックスがあると、ユーザーがセルをクリックできるようにコードを書く必要があります（白からオレンジに変わります）。 2つの数字はセルの内部を切り替え、オレンジ色のセルは白に戻ります。これは、ユーザーが9個の数字を順番に並べ替えるまで続きます。これまでのところ、これは私が持っているものです。何らかの理由で

function processclick(tileId){ 
if(clickedcell==""){ 
    var firstcell = document.getElementById(tileId); 
    clickedcell = document.getElementById(tileId).innerHTML; 
    document.getElementById(tileId).style.backgroundColor = "#D35400"; 
} 
else{ 
    firstcell.element.innerHTML = document.getElementById(tileId).innerHTML; 
    document.getElementById(tileId).innerHTML = clickedcell; 
    firstcell.style.backgroundColor = "#FFFFFF"; 
    clickedcell = ""; 
} 

、firstcellは、第二のセルで数値を変更しないと色を変えていません。どんな助けもありがとう。

Answer 1

それは難しいが、HTMLの例なしに答えることですが、私はあなたがここで見ることができますフィドルにあなたの作業例をした：

<table> 
    <tbody> 
    <tr> 
     <td>1</td> 
     <td>2</td> 
     <td>3</td> 
    </tr> 
    <tr> 
     <td>4</td> 
     <td>5</td> 
     <td>6</td> 
    </tr> 
    <tr> 
     <td>7</td> 
     <td>8</td> 
     <td>9</td> 
    </tr> 
    </tbody> 
</table> 

： https://jsfiddle.net/fistuks/gn8fq7fs/

私はちょうどテーブルには、あなたの行列を表現するためでした

背景色のCSSルール：

td { 
    padding: 7px; 
    cursor: pointer; 
} 

.orange { 
    background: orange; 
} 

、これはコードである：

var cells = document.getElementsByTagName("td"); 
var firstClickedTd = false; 
for (var i = 0; i < cells.length; i++) { 
    var cell = cells[i]; 
    cell.addEventListener('click', function(e) { 
    if (!firstClickedTd) { 
     firstClickedTd = this; 
     firstClickedTd.classList.toggle('orange'); 
    } else { 
     var tmp = this.innerHTML; 
     this.innerHTML = firstClickedTd.innerHTML; 
     firstClickedTd.innerHTML = tmp; 
     firstClickedTd.classList.toggle('orange'); 
     firstClickedTd = false; 
    } 
    }); 
}