如何將顏色值從一個div複製到另一個div？

在重新創建一個名爲mastermind的遊戲過程中，我需要在單擊按鈕時將colorvalues從一個div複製到另一個div。雖然我很困惑如何使用JavaScript來做到這一點。我瀏覽過網頁，雖然我沒有遇到過類似情況的人。我粘貼下面的代碼，以便你們可以看看它，也許找出一個有效的方法來做到這一點。如何將顏色值從一個div複製到另一個div？

這裏是我的代碼：「檢查」

var color = ["red", "blue", "yellow", "white", "black", "green", "orange", "magenta"]; 
 

 
function generateCode() { 
 
    var picked = []; 
 
    while (picked.length < 4) { 
 
    var index = parseInt(Math.random() * color.length, 0); 
 
    var c = color[index]; 
 
    if (picked.indexOf(c) == -1) { 
 
     picked.push(c); 
 
    } 
 

 
    } 
 
    return picked; 
 
} 
 

 
$(function() { 
 
    var pickedCode = generateCode(); 
 
    console.log(pickedCode); 
 

 
    var indices = []; 
 
    $('.pickcolor').on('click', function(e) { 
 
    var index = indices[e.target.id] ? indices[e.target.id] : 0; 
 
    var currentColor = color[index]; 
 
    $(e.target).css('background-color', currentColor) 
 
     .data('data-color', currentColor); 
 
    index = index + 1 >= color.length ? 0 : index + 1; 
 
    indices[e.target.id] = index; 
 
    }); 
 

 
    $('#checkButton').on('click', function() { 
 
    var entry = [ 
 
     $('#choosecolor0').data('data-color'), 
 
     $('#choosecolor1').data('data-color'), 
 
     $('#choosecolor2').data('data-color'), 
 
     $('#choosecolor3').data('data-color') 
 
    ]; 
 

 
    if (entry.indexOf(undefined) > -1) { 
 
     alert('Je hebt nog geen vier kleuren gekozen'); 
 
     return; 
 
    } 
 

 
    }); 
 
});

body { 
 
    overflow: auto; 
 
    background-color: lightgrey; 
 
    height: 99%; 
 
    width: 99%; 
 
} 
 
div { 
 
    border: 2px solid black; 
 
} 
 
.infobar { 
 
    height: 598px; 
 
    width: 200px; 
 
    right: 50%; 
 
    overflow: hidden; 
 
    position: absolute; 
 
    top: 5%; 
 
    right: 0%; 
 
    background-color: white; 
 
} 
 
.button { 
 
    height: 70px; 
 
    width: 300px; 
 
    position: absolute; 
 
    font-size: 36px; 
 
    top: 11%; 
 
    left: 25%; 
 
    background-color: white; 
 
} 
 
.turn { 
 
    float: left; 
 
    width: 65px; 
 
    height: 350px; 
 
    border: 0px; 
 
} 
 
.colorpin { 
 
    float: left; 
 
    width: 14px; 
 
    height: 14px; 
 
    background-color: gray; 
 
    margin: 3px; 
 
} 
 
.spacex { 
 
    float: left; 
 
    width: 50px; 
 
    height: 50px; 
 
    margin: 6px; 
 
} 
 
.colorfield { 
 
    float: left; 
 
    width: 65px; 
 
    height: 65px; 
 
    background-color: white; 
 
    margin: 10px; 
 
    margin-left: 15px; 
 
} 
 
#board { 
 
    width: 652px; 
 
    height: 330px; 
 
    margin: auto; 
 
    background-color: darkgrey; 
 
    position: absolute; 
 
    top: 25.5%; 
 
    left: 25%; 
 
} 
 
#turn-interactive { 
 
    width: 100px; 
 
    height: 357px; 
 
    background-color: white; 
 
    margin: auto; 
 
    margin-bottom: 10px; 
 
    position: absolute; 
 
    top: 28%; 
 
    left: 15% 
 
} 
 
.turnint { 
 
    width: 70px; 
 
    height: 265px; 
 
    border: 2px solid black; 
 
    position: absolute; 
 
    top: 36%; 
 
    left: 17%; 
 
} 
 
.footer { 
 
    width: 80%; 
 
    position: absolute; 
 
    left: 3%; 
 
    top: 87%; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <title>Master Mind</title> 
 
    <meta charset="UTF-8"> 
 
    <script src="https://code.jquery.com/jquery-3.0.0.min.js"></script> 
 
    <script src="script.js"></script> 
 
    <link rel="stylesheet" href="style.css"> 
 
</head> 
 

 

 
<div id="turn-interactiv" class="turnint"> 
 
    <div id="choosecolor0" class="spacex pickcolor"></div> 
 
    <div id="choosecolor1" class="spacex pickcolor"></div> 
 
    <div id="choosecolor2" class="spacex pickcolor"></div> 
 
    <div id="choosecolor3" class="spacex pickcolor"></div> 
 
</div> 
 

 
<button type="button" id="checkButton" class="button">Check!</button> 
 

 
<div id="board"> 
 
    <div id="turn0" class="turn"> 
 
    <div id="scorediv0" class="spacex"> 
 
     <div id="colorpin" class="colorpin"></div> 
 
     <div id="colorpin" class="colorpin"></div> 
 
     <div id="colorpin" class="colorpin"></div> 
 
     <div id="colorpin" class="colorpin"></div> 
 
    </div> 
 
    <div id="space0-0" class="spacex"></div> 
 
    <div id="space0-1" class="spacex"></div> 
 
    <div id="space0-2" class="spacex"></div> 
 
    <div id="space0-3" class="spacex"></div> 
 
    </div> 
 
    <div id="turn1" class="turn"> 
 
    <div id="scorediv1" class="spacex"> 
 
     <div id="colorpin" class="colorpin"></div> 
 
     <div id="colorpin" class="colorpin"></div> 
 
     <div id="colorpin" class="colorpin"></div> 
 
     <div id="colorpin" class="colorpin"></div> 
 
    </div> 
 
    <div id="space1_0" class="spacex"></div> 
 
    <div id="space1_1" class="spacex"></div> 
 
    <div id="space1_2" class="spacex"></div> 
 
    <div id="space1_3" class="spacex"></div> 
 
    </div> 
 
    <div id="turn2" class="turn"> 
 
    <div id="scorediv2" class="spacex"> 
 
     <div id="colorpin" class="colorpin"></div> 
 
     <div id="colorpin" class="colorpin"></div> 
 
     <div id="colorpin" class="colorpin"></div> 
 
     <div id="colorpin" class="colorpin"></div> 
 
    </div> 
 
    <div id="space2-0" class="spacex"></div> 
 
    <div id="space2-1" class="spacex"></div> 
 
    <div id="space2-2" class="spacex"></div> 
 
    <div id="space2-3" class="spacex"></div> 
 
    </div> 
 
    <div id="turn3" class="turn"> 
 
    <div id="scorediv3" class="spacex"> 
 
     <div id="colorpin" class="colorpin"></div> 
 
     <div id="colorpin" class="colorpin"></div> 
 
     <div id="colorpin" class="colorpin"></div> 
 
     <div id="colorpin" class="colorpin"></div> 
 
    </div> 
 
    <div id="space3-0" class="spacex"></div> 
 
    <div id="space3-1" class="spacex"></div> 
 
    <div id="space3-2" class="spacex"></div> 
 
    <div id="space3-3" class="spacex"></div> 
 
    </div> 
 
    <div id="turn4" class="turn"> 
 
    <div id="scorediv4" class="spacex"> 
 
     <div id="colorpin" class="colorpin"></div> 
 
     <div id="colorpin" class="colorpin"></div> 
 
     <div id="colorpin" class="colorpin"></div> 
 
     <div id="colorpin" class="colorpin"></div> 
 
    </div> 
 
    <div id="space4-0" class="spacex"></div> 
 
    <div id="space4-1" class="spacex"></div> 
 
    <div id="space4-2" class="spacex"></div> 
 
    <div id="space4-3" class="spacex"></div> 
 
    </div> 
 
    <div id="turn5" class="turn"> 
 
    <div id="scorediv5" class="spacex"> 
 
     <div id="colorpin" class="colorpin"></div> 
 
     <div id="colorpin" class="colorpin"></div> 
 
     <div id="colorpin" class="colorpin"></div> 
 
     <div id="colorpin" class="colorpin"></div> 
 
    </div> 
 
    <div id="space5_0" class="spacex"></div> 
 
    <div id="space5_1" class="spacex"></div> 
 
    <div id="space5_2" class="spacex"></div> 
 
    <div id="space5_3" class="spacex"></div> 
 

 
    </div> 
 
    <div id="turn6" class="turn"> 
 
    <div id="scorediv6" class="spacex"> 
 
     <div id="colorpin" class="colorpin"></div> 
 
     <div id="colorpin" class="colorpin"></div> 
 
     <div id="colorpin" class="colorpin"></div> 
 
     <div id="colorpin" class="colorpin"></div> 
 
    </div> 
 
    <div id="space6-0" class="spacex"></div> 
 
    <div id="space6-1" class="spacex"></div> 
 
    <div id="space6-2" class="spacex"></div> 
 
    <div id="space6-3" class="spacex"></div> 
 

 
    </div> 
 
    <div id="turn7" class="turn"> 
 
    <div id="scorediv7" class="spacex"> 
 
     <div id="colorpin" class="colorpin"></div> 
 
     <div id="colorpin" class="colorpin"></div> 
 
     <div id="colorpin" class="colorpin"></div> 
 
     <div id="colorpin" class="colorpin"></div> 
 
    </div> 
 
    <div id="space7_0" class="spacex"></div> 
 
    <div id="space7_1" class="spacex"></div> 
 
    <div id="space7_2" class="spacex"></div> 
 
    <div id="space7_3" class="spacex"></div> 
 
    </div> 
 
    <div id="turn8" class="turn"> 
 
    <div id="scorediv8" class="spacex"> 
 
     <div id="colorpin" class="colorpin"></div> 
 
     <div id="colorpin" class="colorpin"></div> 
 
     <div id="colorpin" class="colorpin"></div> 
 
     <div id="colorpin" class="colorpin"></div> 
 
    </div> 
 
    <div id="space8_0" class="spacex"></div> 
 
    <div id="space8_1" class="spacex"></div> 
 
    <div id="space8_2" class="spacex"></div> 
 
    <div id="space8_3" class="spacex"></div> 
 
    </div> 
 
    <div id="turn9" class="turn"> 
 
    <div id="scorediv9" class="spacex"> 
 
     <div id="colorpin" class="colorpin"></div> 
 
     <div id="colorpin" class="colorpin"></div> 
 
     <div id="colorpin" class="colorpin"></div> 
 
     <div id="colorpin" class="colorpin"></div> 
 
    </div> 
 
    <div id="space9_0" class="spacex"></div> 
 
    <div id="space9_1" class="spacex"></div> 
 
    <div id="space9_2" class="spacex"></div> 
 
    <div id="space9_3" class="spacex"></div> 
 
    </div> 
 
</div> 
 
<aside> 
 
    <div id="infobar" class="infobar"> 
 
    <h1>highscore:</h1> 
 
    </div>`</aside>` 
 
<div id="info" class="footer"> 
 
    <footer> 
 
    <p>Jorden Diele</p> 
 
    </footer> 
 
</div> 
 

 
</body onload="restart()"> 
 

 
</html>

我想做什麼情況是，當我按下按鈕，將「choosecolor」div的色值複製到電路板內的「space」div上，按照從左到右的順序排列，並檢查第一列是否已包含值，如果它檢查下一個，直到它可以複製顏色值到一個空的，確保轉彎沒有重疊在第一列，並留下其他九空。。「檢查」按鈕還需要檢查輸入的代碼是否與comp對應。生成一個。（在控制檯內部可見的數組）雖然我還沒有完成那部分。我也使得在計算機生成的代碼中不可能有兩種相同的顏色，所以如果在「choosecolor」div中選擇了兩種相同的顏色，我希望有一個錯誤消息。

檢查輸入代碼並讓黑色和白色的針腳相應地出現（如果你知道主謀的作品，你會明白我的意思）將成爲一個完整的自己的問題，但這將不得不等待另一個問題;）。

榮譽和很多的感謝大家，此致，編程菜鳥:)

來源

2016-06-27 Jorden Diele

您可以創建這樣的小提琴？ –

提供了最少的示例 –

我們注意到的最大問題是元素id必須是唯一的。擁有'id ='colorpin''的所有元素都是無效的。然而，這就是說 - 您可以直接獲取值，如答案中所述，或者在某些情況下，您需要依賴'window.getComputedStyle'，在這裏：https：//developer.mozilla.org/en -US/docs/Web/API/Window/getComputedStyle – enhzflep

使用JavaScript，就可以輕鬆搞定的顏色值：

alert(myDiv.style.backgroundColor);

來源

2016-06-27 12:50:41 Eliott

如果想給它一個顏色值，那麼我會在CSS中這樣做。我遇到的問題是在遊戲中將玩家選擇的顏色複製到棋盤上的四個「choosecolor」div。當點擊按鈕時，計算機需要爲他們提供一種顏色，而不是僅僅用一種顏色給所有的課程。儘管如此，謝謝你給它一些。 –

如何將顏色值從一個div複製到另一個div？

回答

相關問題