檢索div「值」爲javascript

所以，即時嘗試編碼一個簡單的滑動拼圖，並得到真正卡住。我有一個3x3 sqare與不同的「值」檢索div「值」爲javascript

現在，即時嘗試將數字移動到空格，反之亦然。

所以我的問題是，我怎樣才能以最簡單的方式將我的'測試'文本更改爲點擊的div的值？

所有答案和提示都忠實地讚賞

-Karlsen

編輯：

添加完整的代碼，它多一點理解，現在我想：

  var counter = 0; 
 
\t \t \t \t \t var lastClickedDiv; 
 

 

 
\t \t \t \t \t function show(tag, alt1, alt2, alt3, alt4) { 
 
\t \t \t \t \t if (alt1 && document.getElementById(alt1).innerHTML == '') { 
 
\t \t \t \t \t  document.getElementById(alt1).innerHTML = 'test'; 
 
\t \t \t \t \t  tag.innerHTML = ''; 
 
\t \t \t \t \t } 
 

 
\t \t \t \t \t if (alt2 && document.getElementById(alt2).innerHTML == '') { 
 
\t \t \t \t \t  document.getElementById(alt2).innerHTML = 'test1'; 
 
\t \t \t \t \t  tag.innerHTML = ''; 
 
\t \t \t \t \t } 
 

 
\t \t \t \t \t if (alt3 && document.getElementById(alt3).innerHTML == '') { 
 
\t \t \t \t \t  document.getElementById(alt3).innerHTML = 'test2'; 
 
\t \t \t \t \t  tag.innerHTML = ''; 
 
\t \t \t \t \t } 
 

 
\t \t \t \t \t if (alt4 && document.getElementById(alt4).innerHTML == '') { 
 
\t \t \t \t \t  document.getElementById(alt4).innerHTML = 'test3'; 
 
\t \t \t \t \t  tag.innerHTML = ''; 
 
\t \t \t \t \t } 
 
\t \t \t \t \t }

\t \t div.container { 
 
\t \t \t display: flex; 
 
\t \t \t height: 28vh; 
 
\t \t } 
 
\t \t \t div.number { 
 
\t \t \t \t color: \t black; 
 
\t \t \t \t background-color: rgb(140,0,0); 
 
\t \t \t \t margin: 10px; 
 
\t \t \t \t border: 10px solid black; 
 
\t \t \t \t display: flex; 
 
\t \t \t \t flex: 1; 
 
\t \t \t \t font-size: 500%; 
 
\t \t \t \t text-align: center; 
 
\t \t \t \t flex-direction: column; 
 
\t \t \t \t justify-content: center; 
 
\t \t \t }

<!DOCTYPE html> 
 
<html> 
 
\t <head> 
 

 
\t </head> 
 
\t \t <body> 
 

 
\t \t \t <H1> Sliding Puzzle </H1> 
 

 
\t \t \t <div class="container"> 
 
\t \t \t <div id="a1" class="number" onclick="show(this, 'a2', 'b1')">8</div> 
 
\t \t \t <div id="a2" class="number" onclick="show(this, 'a1', 'a3', 'b2')">5</div> 
 
\t \t \t <div id="a3" class="number" onclick="show(this, 'a2', 'b3')">4</div> 
 
\t \t \t </div> 
 

 
\t \t \t <div class="container"> 
 
\t \t \t <div id="b1" class="number" onclick="show(this, 'a1', 'b2', 'c1')">6</div> 
 
\t \t \t <div id="b2" class="number" onclick="show(this, 'a2', 'b1', 'b3', 'c2')">7</div> 
 
\t \t \t <div id="b3" class="number" onclick="show(this, 'a3', 'b2', 'c3')">2</div> 
 
\t \t \t </div> 
 

 
\t \t \t <div class="container"> 
 
\t \t \t <div id="c1" class="number" onclick="show(this, 'b1', 'c2')">1</div> 
 
\t \t \t <div id="c2" class="number" onclick="show(this, 'c1', 'b2', 'c3')">3</div> 
 
\t \t \t <div id="c3" class="number" onclick="show(this, 'c2', 'b3')"></div> 
 
\t \t \t </div> 
 
\t \t </body> 
 
</html>

來源

2017-06-03 Thomas Karlsen

你能解釋一下嗎？什麼是期望的輸出？ –

希望的輸出是document.getElementById（alt4）.innerHTML =其中一個被點擊的DIV。希望這可以很好地解釋它，英語不是我的第一語言，缺乏詞彙表會讓它很難:) –

在'show'函數，alt4將始終未定義，因爲show函數需要5個參數，並且最多傳遞4個參數。 –

我想你想這一點，請嘗試運行這段代碼：

<!DOCTYPE html> 
    <html> 
    <head> 
     <style> 
      div.container { 
       display: flex; 
       height: 28vh; 
      } 
      div.number { 
       color: black; 
       background-color: rgb(140,0,0); 
       margin: 10px; 
       border: 10px solid black; 
       display: flex; 
       flex: 1; 
       font-size: 500%; 
       text-align: center; 
       flex-direction: column; 
       justify-content: center; 
      } 

     </style> 
    </head> 
    <body> 
     <H1> Sliding Puzzle </H1> 
     <div class="container"> 
      <div data-cell="0,0" class="number" >8</div> 
      <div data-cell="0,1" class="number">5</div> 
      <div data-cell="0,2" class="number">4</div> 
     </div> 
     <div class="container"> 
      <div data-cell="1,0" class="number">6</div> 
      <div data-cell="1,1" class="number">7</div> 
      <div data-cell="1,2" class="number">2</div> 
     </div> 
     <div class="container"> 
      <div data-cell="2,0" class="number">1</div> 
      <div data-cell="2,1" class="number">3</div> 
      <div data-cell="2,2" class="number"></div> 
     </div> 
     <script> 

      //By defaul to null as we will calculate 
      var emptyCell = null; 
      var numbersEls = document.getElementsByClassName('number'); 
      for (var counter = 0, max = numbersEls.length; counter < max; counter++) { 
       var el = numbersEls[counter]; 
       el.addEventListener('click', onNumberCellClick); 
       if(el.innerHTML == ''){ 
        emptyCell = el;    
       } 
      }    

      function onNumberCellClick(clickedEl){ 
       var clickedEl = this; 
       var cellIdentifier = getCellIdentifier(clickedEl); 

       //if empty cell not null 
       if(emptyCell){    

        var swapPositions = getCellSwapAvailability(cellIdentifier); 

        //We can move the cell 
        if(swapPositions.indexOf(emptyCell.dataset.cell) > -1){ 
         emptyCell.innerHTML = clickedEl.innerHTML;     

         //Swap the position as the empty cell is changed; 
         emptyCell = clickedEl; 
         emptyCell.innerHTML = ''; 
        } 
       } 
      } 

      function getCellSwapAvailability(identifier){ 
       //Calculate where cell can be moved 
       var positions = []; 
       var pos = identifier.row + ',' + (identifier.col-1); 
       positions.push(pos); 
       var pos = identifier.row + ',' + (identifier.col+1); 
       positions.push(pos); 
       var pos = (identifier.row-1) + ',' + (identifier.col); 
       positions.push(pos); 
       var pos = (identifier.row+1) + ',' + (identifier.col); 
       positions.push(pos); 
       return positions; 
      } 

      function getCellIdentifier(cell){ 
       var cellIndex = cell.dataset.cell; 
       var identifierArr = cellIndex.split(','); 
       var r = Number(identifierArr[0]); 
       var c = Number(identifierArr[1]); 
       return {row: r, col: c}; 
      } 
     </script> 
    </body> 
    </html>

從jQuery的改變給JavaScript

來源

2017-06-04 09:39:05 DASH

這就是我正在尋找的，謝謝:)我現在用一些時間來理解它。再次謝謝你！ –

不客氣，如果你願意，我可以幫你理解，我在skype – DASH

那裏肯定沒問題 – DASH

首先你有錯誤的第4行的JavaScript，

document.getElementById(alt1).innerHTML. = 'test';

不能有「。」在innerHTML之後。

可能這就是問題所在，你無法運行JS

來源

2017-06-03 20:28:32 DASH

啊，這是一個偷偷摸摸的，當我複製粘貼代碼時。但相當敏銳！ :-) –

我試圖執行你的代碼給了我錯誤。所有這一切都要歸功於Chrome調試器。你能解決這個問題嗎？如果是，請將其標記爲答案。謝謝 – DASH

我還沒能解決問題。這也只是代碼的一部分，如果你想要完整的東西只是這樣說，生病發布:) –

你有一個額外的「」因爲JavaScript中位於第4行的@DASH建議，並且您在第4行的HTML中缺少'。

如果你不介意的話，我加了一點CSS來看看更好。

function show(tag, alt1, alt2, alt3, alt4) { 
 
    if (alt1 && document.getElementById(alt1).innerHTML == '') { 
 
    document.getElementById(alt1).innerHTML = 'test'; 
 
    tag.innerHTML = ''; 
 
    } 
 

 
    if (alt2 && document.getElementById(alt2).innerHTML == '') { 
 
    document.getElementById(alt2).innerHTML = 'test1'; 
 
    tag.innerHTML = ''; 
 
    } 
 

 
    if (alt3 && document.getElementById(alt3).innerHTML == '') { 
 
    document.getElementById(alt3).innerHTML = 'test2'; 
 
    tag.innerHTML = ''; 
 
    } 
 

 
    if (alt4 && document.getElementById(alt4).innerHTML == '') { 
 
    document.getElementById(alt4).innerHTML = 'test3'; 
 
    tag.innerHTML = ''; 
 
    } 
 
}

.container { 
 
    display: flex; 
 
    width: 200px; 
 
    background-color: beige; 
 
    justify-content: space-around; 
 
} 
 

 
.number { 
 
    flex-basis: 100%; 
 
    height: 50px; 
 
    margin: 5px; 
 
    border: 1px solid black; 
 
    cursor: pointer; 
 
}

<div class="container"> 
 
    <div id="a1" class="number" onclick="show(this, 'a2', 'b1')">8</div> 
 
    <div id="a2" class="number" onclick="show(this, 'a1', 'a3', 'b2')">5</div> 
 
    <div id="a3" class="number" onclick="show(this, 'a2', 'b3')">4</div> 
 
</div> 
 

 
<div class="container"> 
 
    <div id="b1" class="number" onclick="show(this, 'a1', 'b2', 'c1')">6</div> 
 
    <div id="b2" class="number" onclick="show(this, 'a2', 'b1', 'b3', 'c2')">7</div> 
 
    <div id="b3" class="number" onclick="show(this, 'a3', 'b2', 'c3')">2</div> 
 
</div> 
 

 
<div class="container"> 
 
    <div id="c1" class="number" onclick="show(this, 'b1', 'c2')">1</div> 
 
    <div id="c2" class="number" onclick="show(this, 'c1', 'b2', 'c3')">3</div> 
 
    <div id="c3" class="number" onclick="show(this, 'c2', 'b3')"></div> 
 
</div>

來源

2017-06-04 00:50:27

謝謝，現在已經弄清楚了這一部分。現在，下一部分是保留數字，沒有「測試」文本。有任何想法嗎？:) –

請詳細說明，以便我可以幫助您的那個 – DASH

是否要將數字移動到空框中，如果旁邊有空框？ – DASH

檢索div「值」爲javascript

回答

相關問題