javascript - 将用户/计算机分数添加到推文

Question

问题:当用户单击 Twitter 图标时，它会弹出一个推文框，但不会添加 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>&copy; Zack 2016</span>
          </div>
        </div>

Answer 1

将推文中您的分数部分更改为以下内容:

  //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 );