あるdivの色の値を別のdivにコピーするにはどうすればよいですか？

mastermindというゲームを再現するプロセス中にボタンをクリックすると、あるdivから別のdivにcolorvaluesをコピーする必要があります。私は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にコピーされ、左から右の順に列に表示され、最初の列に値がすでに含まれているかどうかをチェックします次のものは、カラー値を空の値にコピーするまで、最初の列の上に重なりはなく、他の9つは空のままにしておきます。。 "Check"ボタンはまた、入力コードがcompと一致するかどうかをチェックする必要があります。生成されたもの。（コンソールの内部に見える配列）まだその部分にはまだありません。私はまた、コンピュータで生成されたコードに同じ色の2つを持つことは不可能にしているので、同じ色の2つが "choosecolor" divの内部で選択されている場合、エラーメッセージが表示されます。

入力コードを確認して、黒と白のピンが対応して表示されるようにしてください（私が何を意味するか知っている場合は、マスターマインドが分かります）。他の質問を待つ;）。

賞賛し、すべての人のおかげでたくさんの、敬具、プログラミングのnoob :) JavaScriptを使用して

出典

2016-06-27 Jorden Diele

あなたは、このためのフィドルを作成することができます？ –

は最小限の例を提供します –

私たちを見つめている最大の問題は、要素 'id'が一意である必要があるという事実です。 'id = 'colorpin''を持つこれらの要素はすべて無効です。しかし、答えに記載されているように直接値を取得することもできますし、場合によっては 'window.getComputedStyle'に依存する必要があります。https://developer.mozilla.org/en -US/docs/Web/API/Window/getComputedStyle – enhzflep

、あなたは簡単に色の値を取得できます。

alert(myDiv.style.backgroundColor);

出典

2016-06-27 12:50:41 Eliott

色の価値を与えたいと思ったら、私はCSSでやっただろう。私が抱えている問題は、ゲーム中に選手が選んだ色を、4つの「選択色」のdivとボード上の色にコピーすることです。私はボタンをクリックしたときにコンピュータに色を付ける必要があります。私はすべての色にクラスを与えます。しかし、それをいくつか与えてくれてありがとう。 –

あるdivの色の値を別のdivにコピーするにはどうすればよいですか？

答えて

関連する問題