问题：当用户点击推特图标时，会弹出推文框，但不会添加USER_SCORE / COMPUTER_SCORE变量的值。现在我只是单独测试了USER_SCORE。
我想我可以使用其中的值创建一个文本节点，并将其附加到框中，但这不起作用，并且我不确定其他什么会真正起作用。
所需结果：点击Twitter按钮后，我想将USER_SCORE / COMPUTER_SCORES的值添加到推文框中。
JSBIN：http://jsbin.com/gabenafula/edit?html,js,output
JavaScript：
window.onload = function() {
//vars scope may change in the future.
var CHOICE_ROCK = document.querySelector('#rock'),
CHOICE_PAPER = document.querySelector('#paper'),
CHOICE_SCISSORS = document.querySelector('#scissors'),
WINNER_TXT = document.querySelector('#winner'),
BUTTONS = document.querySelectorAll('input'),
COMP_IMG = document.querySelector('#compChoice'),
USER_SCORE_EL = document.querySelector('#user-score'),
COMP_SCORE_EL = document.querySelector('#computer-score'),
PLAYER_CHOICE = document.querySelector('#player-choice'),
TWEET = document.querySelector('#tweet'),
USER_SCORE = 0,
COMPUTER_SCORE = 0,
GAME_SCORE = { USER_SCORE: 0, COMPUTER_SCORE: 0}, // add pt to each per win, stringify to local Storage
key = 'scores';
CHOICE_ROCK.addEventListener('click', USER_CHOICE, false);
CHOICE_PAPER.addEventListener('click', USER_CHOICE, false);
CHOICE_SCISSORS.addEventListener('click', USER_CHOICE, false);
//tweet your score
TWEET.addEventListener('click', function() {
var scoreValue = document.createTextNode(USER_SCORE.value);
window.open('https://twitter.com/intent/tweet?text=').appendChild(scoreValue);
}, false );
// Return user choice value;
function USER_CHOICE(e) {
var compChoice = COMPUTER_CHOICE();
var el = e.target;
if (el === CHOICE_ROCK) {
console.log('USER CHOICE: ROCK');
console.log('COMPS CHOICE: ' + compChoice);
console.log(USER_SCORE);
console.log(COMPUTER_SCORE);
ROCK('rock', compChoice);
PLAYER_CHOICE_STYLE('ROCK!');
USER_SCORE_EL.innerHTML = 'Your Score : ' + USER_SCORE;
COMP_SCORE_EL.innerHTML = 'Computer Score : ' + COMPUTER_SCORE;
} else if (el === CHOICE_PAPER) {
console.log('USER CHOICE: PAPER');
console.log('COMPS CHOICE: ' + compChoice);
console.log(USER_SCORE);
console.log(COMPUTER_SCORE);
PAPER('paper', compChoice);
PLAYER_CHOICE_STYLE('PAPER!');
USER_SCORE_EL.innerHTML = 'Your Score : ' + USER_SCORE;
COMP_SCORE_EL.innerHTML = 'Computer Score : ' + COMPUTER_SCORE;
} else if (el === CHOICE_SCISSORS) {
console.log('USER CHOICE: SCISSORS');
console.log('COMPS CHOICE: ' + compChoice);
console.log(USER_SCORE);
console.log(COMPUTER_SCORE);
SCISSORS('scissors', compChoice);
PLAYER_CHOICE_STYLE('SCISSORS!');
USER_SCORE_EL.innerHTML = 'Your Score : ' + USER_SCORE;
COMP_SCORE_EL.innerHTML = 'Computer Score : ' + COMPUTER_SCORE;
}
e.stopPropagation();
}
// Return value of computer choice
function COMPUTER_CHOICE() {
var num = Math.floor(Math.random() * 3) + 1;
console.log('COMP CHOICE number: ' + num);
if (num === 1) {
COMP_IMG.setAttribute('src', 'http://i.imgur.com/OHt2rjH.png');
COMP_IMG.style.border = '1px solid black';
return 'rock';
} else if (num === 2) {
COMP_IMG.setAttribute('src', 'http://i.imgur.com/H86s3q4.png');
COMP_IMG.style.border = '1px solid black';
return 'paper';
} else if (num === 3) {
COMP_IMG.setAttribute('src', 'http://i.imgur.com/rAkxkWc.png');
COMP_IMG.style.border = '1px solid black';
return 'scissors';
}
}
// Break up into functions
// compare values of user choice and computer chocie
function ROCK(USER_CHOICE, COMPUTER_CHOICE) {
if (USER_CHOICE === CHOICE_ROCK.id && COMPUTER_CHOICE === 'scissors') {
//user wins
USER_SCORE ++;
WINNER_TXT.style.color = 'green';
WINNER_TXT.innerHTML = 'YOU WIN!';
} else if (USER_CHOICE === CHOICE_ROCK.id && COMPUTER_CHOICE === 'paper') {
//comp wins
COMPUTER_SCORE ++;
WINNER_TXT.style.color = 'red';
WINNER_TXT.innerHTML = 'COMPUTER WINS!';
} else if (USER_CHOICE === CHOICE_ROCK.id && COMPUTER_CHOICE === 'rock') {
WINNER_TXT.style.color = 'blue';
WINNER_TXT.innerHTML = 'ITS A TIE!!!!!';
}
}
function PAPER(USER_CHOICE, COMPUTER_CHOICE) {
//Paper
if (USER_CHOICE === CHOICE_PAPER.id && COMPUTER_CHOICE === 'rock') {
//user wins
USER_SCORE ++;
WINNER_TXT.style.color = 'green';
WINNER_TXT.innerHTML = 'YOU WIN!';
} else if (USER_CHOICE === CHOICE_PAPER.id && COMPUTER_CHOICE === 'scissors') {
//comp wins
COMPUTER_SCORE ++;
WINNER_TXT.style.color = 'red';
WINNER_TXT.innerHTML = 'COMPUTER WINS!';
} else if (USER_CHOICE === CHOICE_PAPER.id && COMPUTER_CHOICE === 'paper') {
WINNER_TXT.style.color = 'blue';
WINNER_TXT.innerHTML = 'ITS A TIE!!!!!';
}
}
function SCISSORS(USER_CHOICE, COMPUTER_CHOICE) {
//scissors
if (USER_CHOICE === CHOICE_SCISSORS.id && COMPUTER_CHOICE === 'paper') {
//user wins
USER_SCORE ++;
WINNER_TXT.style.color = 'green';
WINNER_TXT.innerHTML = 'YOU WIN!';
} else if (USER_CHOICE === CHOICE_SCISSORS.id && COMPUTER_CHOICE === 'rock') {
//comp wins
COMPUTER_SCORE ++;
WINNER_TXT.style.color = 'red';
WINNER_TXT.innerHTML = 'COMPUTER WINS!';
} else if (USER_CHOICE === CHOICE_SCISSORS.id && COMPUTER_CHOICE === 'scissors') {
WINNER_TXT.style.color = 'blue';
WINNER_TXT.innerHTML = 'ITS A TIE!!!!!';
}
}
function PLAYER_CHOICE_STYLE(choice) {
PLAYER_CHOICE.innerHTML = 'You chose: ' + choice;
PLAYER_CHOICE.style.fontWeight = 'bold';
PLAYER_CHOICE.style.backgroundColor = '#555';
PLAYER_CHOICE.style.color = 'white';
PLAYER_CHOICE.style.borderBottom = '3px solid #444';
PLAYER_CHOICE.style.borderRadius = '30px';
PLAYER_CHOICE.style.padding ='10px';
}
// Add Local Storage
// function RENDER_SCORES() {
//
// }
//
// //Store scores
// function STORE_SCORE(LOCAL_STORAGE, key) {
// var score = JSON.stringify(LOCAL_STORAGE);
// LOCAL_STORAGE.setItem(key, score);
// }
//fetch scores
// function fetch(key, callback) {
// var LOCAL_STORAGE = JSON.pase(LOCAL_STORAGE.getItem(key));
// callback(LOCAL_STORAGE);
// }
//
// function render(data) {
// if (data !== null && data.hasOwnProperty('forEach')) {
// data.forEach(function(current){
// RENDER_SCORES(current);
// });
// }
// }
};
HTML：
<div class="container">
<div class="header"><h1>ROCK, PAPER, OR SCISSORS!</h1></div>
<div><span id="winner"></span></div>
<div>Computer's choice:</div>
<div><img id="compChoice" src="" alt="computers choice"></div>
<div id="player-choice"></div>
<div class="inner-container">
<div class="row">
<div class='items'>
<img class="rps" id="rock-img" src="https://cdn0.iconfinder.com/data/icons/rock-paper-scissors-emoji/792/rock-paper-scissors-emoji-cartoon-027-128.png" width="200" height="300">
<div><input type="submit" value="Rock" id="rock"></div>
</div>
<div class='items'>
<img class="rps" src="https://cdn0.iconfinder.com/data/icons/rock-paper-scissors-emoji/792/rock-paper-scissors-emoji-cartoon-019-256.png" width="200" height="300">
<div><input type="submit" value="Paper" id="paper"></div>
</div>
<div class='items'>
<img class="rps" src="https://cdn0.iconfinder.com/data/icons/rock-paper-scissors-emoji/792/rock-paper-scissors-emoji-cartoon-014-512.png" width="200" height="300">
<div><input type="submit" value="Scissors" id="scissors"></div>
</div>
</div>
</div>
<div id="scoreboard">
<div><h2 id='user-score'>Your Score:</h2></div>
<div><h2 id='computer-score'>Computer Score:</h2></div>
<img src="https://cdn4.iconfinder.com/data/icons/social-media-icons-the-circle-set/48/twitter_circle-128.png" id="tweet">
</div>
<div class="footer">
<span>© Zack 2016</span>
</div>
</div>
答案 0 :(得分：4)
将您的乐谱部分的推文更改为以下内容：
//tweet your score
TWEET.addEventListener('click', function() {
var message = "Your score was " + USER_SCORE + ". The computers score was " + COMPUTER_SCORE;
window.open('https://twitter.com/intent/tweet?text=' + message);
}, false );