0
私はこのJSオブジェクト
構文を使用してオブジェクトの配列内の値を更新しようとしているの配列内の値に接続されているHTML内の値を更新できません[objectindex] .key + 1;
on console.logオブジェクトから完全に値を取得すると、オブジェクトの値は更新されません。
私はSCORE BOARDSをMATCHING内の関数で更新しようとしています。
私はその値をHTMLのスコアリングポイントとして使用します。
//-----------------CARDS DECK--------------------
var cards = [
{
rank:"Queen",
suit: "Hearts",
cardImage: "images/queen-of-hearts.png"
},
{
rank: "Queen",
suit: "Dimonds",
cardImage: "images/queen-of-diamonds.png"
},
{rank: "King",
suit: "Hearts",
cardImage: "images/king-of-hearts.png"
},
{
rank: "King",
suit: "Diamonds",
cardImage: "images/king-of-diamonds.png"
}
];
//-----------------SCORE BOARDS-----------------
var score = [
{
points:0,
parent: 'left-board',
side:"p1"
},
{
points:0,
parent:'right-board',
side:"ai"
}
];
var cardsInPlay = [];
//----------------CREATE THE GAMEBOARD-----------
var createBoard = function() {
for (var i=0; i < cards.length; i++) {
var cardElement = document.createElement('img');
cardElement.setAttribute('src','images/back.png');
cardElement.setAttribute('data-id',i);
cardElement.addEventListener('click',flipCard);
document.getElementById('game-board').appendChild(cardElement);
}
}
//--------------CREATE SCORE-------------------
var createScore = function() {
for (var i=0; i < score.length; i++) {
var scoreElement = document.createElement('div');
scoreElement.setAttribute('class','points');
scoreElement.setAttribute('id',score[i].side);
document.getElementById(score[i].parent).appendChild(scoreElement);
document.getElementById(score[i].side).innerHTML=score[i].points;
}
}
//----------------FLIPCARD----------------------
var flipCard = function() {
var cardId = this.getAttribute("data-id");
console.log("User flipped over " + cards[cardId].rank);
console.log(cards[cardId].suit);
console.log(cards[cardId].cardImage);
cardsInPlay.push(cards[cardId].rank);
this.setAttribute('src',cards[cardId].cardImage);
if (cardsInPlay.length === 2) {
setTimeout(checkForMatch,300);
//reset();
}
}
//----------------MATCHING------------------------
function checkForMatch() {
if (cardsInPlay[0] === cardsInPlay[1]) {
alert("You found a match!");
score[0].points ++;
console.log(score[0]);
}
else {
alert("Sorry, try again.");
}
}
//----------------GAME RESET---------------------
var reset = function() {
for (var i=0; i < cards.length; i++) {
document.getElementsByTagName('img')[i].setAttribute('src','images/back.png');
}
cardsInPlay = [];
}
//##############---INVOKING----#####################
createScore();
createBoard();
//score[0].points =
console.log(score[0].points);body {
text-align: center;
margin: 0;
}
h1 {
font-family: Raleway;
color: white;
letter-spacing: 1px;
font-weight: 400;
font-size: 45px;
margin: 0;
}
a {
font-family: Raleway;
letter-spacing: 1px;
font-weight: 400;
font-size: 18px;
border-bottom: 2px solid transparent;
}
a:hover {
border-bottom: 2px solid white;
}
h2 {
font-family: Raleway;
color: #0d2c40;
letter-spacing: 1px;
font-weight: 600;
font-size: 20;
}
p {
font-family: "Droid Serif";
line-height: 26px;
font-size: 18px;
}
header {
background-color: #F15B31;
padding: 30px 20px;
}
main {
width: auto;
margin: 35px auto;
}
nav {
background: #00A6B3;
padding:20px 0;
}
.navlink {
margin:0 20px;
color: white;
}
img {
margin: 20px 8px;
}
footer {
background-color:#0D2C40;
text-transform: uppercase;
padding: 0 20px;
color: white;
font-size: 14px;
letter-spacing: .08em;
font-weight: 500;
}
.copyright {
font-family: Raleway, sans-serif;
float: left;
}
.message{
font-family: Raleway, sans-serif;
float: right;
}
.clearfix:after {
visibility: hidden;
display: block;
content: " ";
clear: both;
height: 0;
font-size: 0;
padding: 0;
}
.name {
color:#F15B31;
font-weight: 700;
}
.point-board {
border-style: solid;
position: absolute;
width: 150px;
height: 150px;
border-radius: 90px;
line-height: 100px;
text-align: center;
font-family: Raleway;
}
#left-board {
top: 630px;
left: 70px;
}
#right-board {
top: 630px;
left: 1152px;
}
.points {
margin: -50px;
}<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Droid+Serif|Raleway:400,500,600,700" rel="stylesheet">
<title>Marco's memory game</title>
</head>
<body>
<header>
<h1>Marco's memory game</h1>
</header>
<nav>
<a class="navlink" href="#instructions">Instructions</a>
<a class="navlink" href="#facts">Game facts</a>
<a class="navlink" href="#game-board">Play!</a>
</nav>
<main>
<h2 id="instructions">Instructions</h2>
<p>Concentration, also known as Match Match, Memory, Pelmanism, Shinkei-suijaku, Pexeso or simply Pairs, is a card game
in which all of the cards are laid face down on a surface and two cards are flipped face up over each turn. The
object of the game is to turn over pairs of matching cards.</p>
<h2 id="facts">Game's facts</h2>
<p>An other popular memory game is called "Kim's game. Kim's Game is a game or exercise played by Boy Scouts, Girl Scouts
and Girl Guides, and other children's groups.[1] The game develops a person's capacity to observe and remember
details. The name is derived from Rudyard Kipling's 1901 novel Kim, in which the hero, Kim, plays the game during
his training as a spy.
<a href="https://en.wikipedia.org/wiki/Kim%27s_Game">More info...</a>
</p>
<div class="point-board" id="left-board">PLAYER
<div class="points" id= "p1"></div>
</div>
<h2>Play!</h2>
<div id="game-board" class="board clearfix"></div>
<div class="point-board" id="right-board">AI
<div class="points" id= "ai">00</div>
</div>
</main>
<footer class="clearfix">
<p class="copyright">Copyright 2017</p>
<p class="message">Created with ♥ by <span class="name"> GA </span></p>
</footer>
<script src="js/main.js"></script>
</body>
</html>
スコア[0] ++ .points。 console.log（スコア[0]）; この文字列を追加すると、更新されたように表示されますが、HTMLは更新されません。 残りのコードを追加しています（CSS + HTML） – Marco
あなたはそれを増やした後、新しいスコアをhtmlに入れる必要があります。 – refeniz
@refenizのような？ function checkForMatch（）{ if（cardsInPlay [0] === cardsInPlay [1]）{ アラート（「一致しました！ document.getElementById（スコア[0] .side）.innerHTML =スコア[0] .points ++; console.log（スコア[0]）; } else { alert（ "申し訳ありません、もう一度やり直してください。"）; } } – Marco