在Javascript中更新外部变量_Javascript_Variables_Scope_Counter

在Javascript中更新外部变量

javascript variables

在Javascript中更新外部变量,javascript,variables,scope,counter,Javascript,Variables,Scope,Counter,我正在创建一个项目，其中我的标记根据骰子的值移动。以下功能负责该操作 var markerMoveFunc = () => { var incrementDice = 0; var diceIncrementer = () => { let dice = Math.floor(Math.random() * 6) + 1; let diceDOM = document.querySelector('.dice'); diceDO

我正在创建一个项目，其中我的标记根据骰子的值移动。以下功能负责该操作

var markerMoveFunc = () => {
    var incrementDice = 0;

    var diceIncrementer = () => {
      let dice = Math.floor(Math.random() * 6) + 1;
      let diceDOM = document.querySelector('.dice');
      diceDOM.style.display = 'block';
      diceDOM.src = '/static' + '/images' + '/dice-' + dice + '.png';
      incrementDice += dice;
    };

    document
      .querySelector('.roll-btn')
      .addEventListener('click', diceIncrementer);

    var firstChild = document.querySelector('#container').childNodes[
      incrementDice
    ];
    firstChild.innerHTML += `<div class='marker'><i class="fas fa-map-marker"></i></div>`;
  };

var markerMoveFunc=（）=>{
var incrementDice=0；
var diceIncrementer=（）=>{
让dice=Math.floor（Math.random（）*6）+1；
让diceDOM=document.querySelector（'.dice'）；
diceDOM.style.display='block'；
diceDOM.src='/static'+'/images'+'/dice-'+dice+'.png'；
递增骰子+=骰子；
};
文件
.querySelector（“.roll btn”）
.addEventListener（'click'，diceIncrementer）；
var firstChild=document.querySelector（“#container”）.childNodes[
递增骰子
];
firstChild.innerHTML+=`；
};

整个代码

function init() {
  const cards = [
    { front: 'Apple', back: 'Яблоко' },
    { front: 'Cherry', back: 'Вишня' },
    { front: 'Melon', back: 'Арбуз' },
    { front: 'Car', back: 'Машина' },
    { front: 'Book', back: 'Книга' },
    { front: 'Pen', back: 'Ручка' },
    { front: 'Nice', back: 'Прекрасный' },
    { front: 'TV', back: 'Телевизор' },
    { front: 'Mobile', back: 'Мобильный' },
    { front: 'Curious', back: 'Любопытный' }
  ];

  var container = document.getElementById('container');

  const createCard = () => {
    for (var card in cards) {
      // Create an item
      var item = document.createElement('div');
      // Add class to item div
      item.className = 'item';
      // Create flip card inner elem
      var flipCardInner = document.createElement('div');
      // Add 'flip-card-inner' class
      flipCardInner.className = 'flip-card-inner';
      // Create front card elem
      var frontCardElem = document.createElement('div');
      // Add 'flip-card-front' class
      frontCardElem.className = 'flip-card-front';
      // Creat front card text
      var frontCardText = document.createTextNode(cards[card].front);
      // Append front card text to frontcard element
      frontCardElem.appendChild(frontCardText);
      // Create back card elem
      var backCardElem = document.createElement('div');
      // Add 'flip-card-front' class
      backCardElem.className = 'flip-card-back';
      // Creat back card text
      var backCardText = document.createTextNode(cards[card].back);
      // Append front card text to frontcard element
      backCardElem.appendChild(backCardText);
      // Append front card elem to flip card inner
      flipCardInner.appendChild(frontCardElem);
      // Append back card elem to flip card inner
      flipCardInner.appendChild(backCardElem);
      // Append flip card inner to item
      item.appendChild(flipCardInner);
      container.appendChild(item);
    }
  };

  createCard();

  var markerMoveFunc = () => {
    var incrementDice = 0;

    var diceIncrementer = () => {
      let dice = Math.floor(Math.random() * 6) + 1;
      let diceDOM = document.querySelector('.dice');
      diceDOM.style.display = 'block';
      diceDOM.src = '/static' + '/images' + '/dice-' + dice + '.png';
      incrementDice += dice;
    };

    document
      .querySelector('.roll-btn')
      .addEventListener('click', diceIncrementer);

    var firstChild = document.querySelector('#container').childNodes[
      incrementDice
    ];
    firstChild.innerHTML += `<div class='marker'><i class="fas fa-map-marker"></i></div>`;
  };

  markerMoveFunc();

  $('.item .flip-card-inner').click(function() {
    $(this)
      .closest('.item')
      .toggleClass('hover');
    $(this).css('transform, rotateX(180deg)');
  });

  document.querySelector('.dice').style.display = 'none';

  var radius = 250; // adjust to move out items in and out
  var inclination = 0;
  var fields = $('.item'),
    container = $('#container'),
    width = container.width(),
    height = container.height();
  var angle = 0,
    step = (2 * Math.PI) / fields.length;

  fields.each(function() {
    var x = Math.round(
      width / 2 + radius * Math.cos(angle) - $(this).width() / 2
    );

    var y = Math.round(
      height / 2 + radius * Math.sin(angle) - $(this).height() / 2
    );

    $(this).css({
      left: x + 'px',
      top: y + 'px',
      WebkitTransform: 'rotate(' + inclination + 'deg)'
    });
    angle += step;
    inclination += 0;
  });
}

init();

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>Ed game</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" type="text/css" media="screen" href="style.css" />
    <link
      rel="stylesheet"
      href="https://use.fontawesome.com/releases/v5.7.2/css/all.css"
      integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr"
      crossorigin="anonymous"
    />
  </head>
  <body>
    <div id="container"></div>
    <div class="dice-holder">
      <img src="static/images/dice-1.png" alt="dice" class="dice" />

      <Button class="roll-btn">Roll dice</Button>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="/scripts/game.js"></script>
  </body>
</html>

函数init（）{
常数卡=[
{前面：'苹果'，后面：'苹果'，
{前面：'Cherry'，后面：'bbцццц'}，
{前面是“瓜”，后面是“瓜”，
{前面：“车”，后面：“车”，
{前面：'Book'，后面：'kerkаиаа'}，
{前面：“笔”，后面：“чча”，
{正面：“不错”，背面：“ППаааааа”}，
{前面：“电视”，后面：“电视”，
{前面：'Mobile'，后面：'Мбббббб'}，
{前面：“好奇”，后面：“好奇”
];
var container=document.getElementById（'container'）；
const createCard=（）=>{
用于（卡中的var卡）{
//创建一个项目
var item=document.createElement（'div'）；
//将类添加到项目div
item.className='item'；
//创建翻转卡内部元素
var flipCardInner=document.createElement（'div'）；
//添加“翻转卡内部”类
flipCardInner.className='FlipCard-inner'；
//创建前卡元素
var frontCardElem=document.createElement（'div'）；
//添加“正面翻转卡”类
frontCardElem.className='flip card front'；
//创建前卡文本
var frontCardText=document.createTextNode（卡片[card].front）；
//将前卡文本附加到前卡元素
frontCardElem.appendChild（frontCardText）；
//创建背卡元素
var backCardElem=document.createElement（'div'）；
//添加“正面翻转卡”类
backCardElem.className='flip card back'；
//创建背面卡片文本
var backCardText=document.createTextNode（卡片[card].back）；
//将前卡文本附加到前卡元素
backCardElem.appendChild（backCardText）；
//将前卡元件附加到翻转卡内部
flipCardInner.appendChild（frontCardElem）；
//将背面卡元素附加到翻转卡内部
flipCardInner.appendChild（backCardElem）；
//将内翻页卡附加到项目
项目.附件（flipCardInner）；
容器。子容器（项目）；
}
};
createCard（）；
var markerMoveFunc=（）=>{
var incrementDice=0；
var diceIncrementer=（）=>{
让dice=Math.floor（Math.random（）*6）+1；
让diceDOM=document.querySelector（'.dice'）；
diceDOM.style.display='block'；
diceDOM.src='/static'+'/images'+'/dice-'+dice+'.png'；
递增骰子+=骰子；
};
文件
.querySelector（“.roll btn”）
.addEventListener（'click'，diceIncrementer）；
var firstChild=document.querySelector（“#container”）.childNodes[
递增骰子
];
firstChild.innerHTML+=`；
};
markerMoveFunc（）；
$（'.item.flip-card-inner'）。单击（函数（）{
$（本）
.最近（“.item”）
.toggleClass（“悬停”）；
$（this.css（'transform，rotateX（180度））；
});
document.querySelector（'.dice'）.style.display='none'；
var radius=250；//调整以将项目移入移出
var倾角=0；
变量字段=$（'.item'），
容器=$（“#容器”），
宽度=容器。宽度（），
高度=容器高度（）；
var角度=0，
步长=（2*Math.PI）/fields.length；
字段。每个（函数（）{
var x=Math.round(
宽度/2+半径*Math.cos（角度）-$（this.width（）/2
);
var y=Math.round(
高度/2+半径*Math.sin（角度）-$（this.height（）/2
);
$（this.css）({
左：x+‘px’，
顶部：y+‘px’，
WebKittTransform:'旋转（'+倾斜度+'度）'
});
角度+=步长；
倾角+=0；
});
}
init（）；

HTML代码

function init() {
  const cards = [
    { front: 'Apple', back: 'Яблоко' },
    { front: 'Cherry', back: 'Вишня' },
    { front: 'Melon', back: 'Арбуз' },
    { front: 'Car', back: 'Машина' },
    { front: 'Book', back: 'Книга' },
    { front: 'Pen', back: 'Ручка' },
    { front: 'Nice', back: 'Прекрасный' },
    { front: 'TV', back: 'Телевизор' },
    { front: 'Mobile', back: 'Мобильный' },
    { front: 'Curious', back: 'Любопытный' }
  ];

  var container = document.getElementById('container');

  const createCard = () => {
    for (var card in cards) {
      // Create an item
      var item = document.createElement('div');
      // Add class to item div
      item.className = 'item';
      // Create flip card inner elem
      var flipCardInner = document.createElement('div');
      // Add 'flip-card-inner' class
      flipCardInner.className = 'flip-card-inner';
      // Create front card elem
      var frontCardElem = document.createElement('div');
      // Add 'flip-card-front' class
      frontCardElem.className = 'flip-card-front';
      // Creat front card text
      var frontCardText = document.createTextNode(cards[card].front);
      // Append front card text to frontcard element
      frontCardElem.appendChild(frontCardText);
      // Create back card elem
      var backCardElem = document.createElement('div');
      // Add 'flip-card-front' class
      backCardElem.className = 'flip-card-back';
      // Creat back card text
      var backCardText = document.createTextNode(cards[card].back);
      // Append front card text to frontcard element
      backCardElem.appendChild(backCardText);
      // Append front card elem to flip card inner
      flipCardInner.appendChild(frontCardElem);
      // Append back card elem to flip card inner
      flipCardInner.appendChild(backCardElem);
      // Append flip card inner to item
      item.appendChild(flipCardInner);
      container.appendChild(item);
    }
  };

  createCard();

  var markerMoveFunc = () => {
    var incrementDice = 0;

    var diceIncrementer = () => {
      let dice = Math.floor(Math.random() * 6) + 1;
      let diceDOM = document.querySelector('.dice');
      diceDOM.style.display = 'block';
      diceDOM.src = '/static' + '/images' + '/dice-' + dice + '.png';
      incrementDice += dice;
    };

    document
      .querySelector('.roll-btn')
      .addEventListener('click', diceIncrementer);

    var firstChild = document.querySelector('#container').childNodes[
      incrementDice
    ];
    firstChild.innerHTML += `<div class='marker'><i class="fas fa-map-marker"></i></div>`;
  };

  markerMoveFunc();

  $('.item .flip-card-inner').click(function() {
    $(this)
      .closest('.item')
      .toggleClass('hover');
    $(this).css('transform, rotateX(180deg)');
  });

  document.querySelector('.dice').style.display = 'none';

  var radius = 250; // adjust to move out items in and out
  var inclination = 0;
  var fields = $('.item'),
    container = $('#container'),
    width = container.width(),
    height = container.height();
  var angle = 0,
    step = (2 * Math.PI) / fields.length;

  fields.each(function() {
    var x = Math.round(
      width / 2 + radius * Math.cos(angle) - $(this).width() / 2
    );

    var y = Math.round(
      height / 2 + radius * Math.sin(angle) - $(this).height() / 2
    );

    $(this).css({
      left: x + 'px',
      top: y + 'px',
      WebkitTransform: 'rotate(' + inclination + 'deg)'
    });
    angle += step;
    inclination += 0;
  });
}

init();

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>Ed game</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" type="text/css" media="screen" href="style.css" />
    <link
      rel="stylesheet"
      href="https://use.fontawesome.com/releases/v5.7.2/css/all.css"
      integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr"
      crossorigin="anonymous"
    />
  </head>
  <body>
    <div id="container"></div>
    <div class="dice-holder">
      <img src="static/images/dice-1.png" alt="dice" class="dice" />

      <Button class="roll-btn">Roll dice</Button>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="/scripts/game.js"></script>
  </body>
</html>


埃德游戏
掷骰子

我不明白为什么incrementDice不更新。你能给我一个建议吗？

你有什么错误吗？另外，请张贴您的HTML代码。HTML代码只是。我不认为这有什么问题。什么是

document.querySelector（“.roll btn”）

？这是一个滚动骰子按钮，如图所示。你能证明html，以便我们能更好地帮助你吗！！你有什么错误吗？另外，请张贴您的HTML代码。HTML代码只是。我不认为这有什么问题。什么是

document.querySelector（“.roll btn”）

？这是一个滚动骰子按钮，如图所示。你能证明html，以便我们能更好地帮助你吗！！