자바 스크립트

Question

숫자가 1-9로 채워진 3 x 3 무작위 매트릭스가 주어지면 사용자가 셀을 클릭 할 수 있도록 코드를 작성해야합니다 (흰색에서 주황색으로 바뀜). 그런 다음 다른 셀을 클릭하면 두 개의 숫자는 셀 내부를 전환하고 오렌지 셀은 다시 흰색으로 바뀝니다. 사용자가 순서대로 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; 
    } 
    }); 
}