觸發function擲骰子

Question

我有一個 function 來獲得隨機值 (1->6) 來擲骰子：

const rollDice = () => {
  document.dispatchEvent(
    new CustomEvent('rollDice', {
      detail: { value: Math.floor(Math.random() * 6) + 1 },
      bubbles: true,
      cancelable: false
    })
  );
};

從 rollDice() 獲取值並放在正確的位置，但我不知道為什么它工作不正確。 結果需要如圖所示： Result

我是這里的新手，任何人都可以幫助指出我哪里出錯了嗎？

 const rollDice = () => { document.dispatchEvent( new CustomEvent('rollDice', { detail: { value: Math.floor(Math.random() * 6) + 1 }, bubbles: true, cancelable: false }) ); }; let btn = document.querySelector("#roll-button"); btn.addEventListener('click', function() { var varones = toNumber(parseInt(document.querySelector("#ones p").textContent)); var vartwos = toNumber(parseInt(document.querySelector("#twos p").textContent)); var varthrees = toNumber(parseInt(document.querySelector("#threes p").textContent)); var varfours = toNumber(parseInt(document.querySelector("#fours p").textContent)); var varfives = toNumber(parseInt(document.querySelector("#fives p").textContent)); var varsixes = toNumber(parseInt(document.querySelector("#sixes p").textContent)); rollDice(); document.addEventListener('rollDice', (e) => { alert(e.detail.value); if (e.detail.value == 1) { varones = varones + 1; } if (e.detail.value == 2) { vartwos = vartwos + 1; } if (e.detail.value == 3) { varthrees = varthrees + 1; } if (e.detail.value == 4) { varfours = varfours + 1; } if (e.detail.value == 5) { varfives = varfives + 1; } if (e.detail.value == 6) { varsixes = varsixes + 1; } total = varones + vartwos + varthrees + varfours + varfives + varsixes; document.querySelector("#ones p").textContent = varones; document.querySelector("#twos p").textContent = vartwos; document.querySelector("#threes p").textContent = varthrees; document.querySelector("#fours p").textContent = varfours; document.querySelector("#fives p").textContent = varfives; document.querySelector("#sixes p").textContent = varsixes; document.querySelector("#totals p span").textContent = total; }); }); function toNumber(a) { if (isNaN(a)) { a = 0; } return a; }

 <h1>Events Triggered and Emitted</h1> <h2>Dice Rolls</h2> <div id="rolls"> <div id="ones"> <span class="dice">&#9856;</span> <p>-</p> </div> <div id="twos"> <span class="dice">&#9857;</span> <p>-</p> </div> <div id="threes"> <span class="dice">&#9858;</span> <p>-</p> </div> <div id="fours"> <span class="dice">&#9859;</span> <p>-</p> </div> <div id="fives"> <span class="dice">&#9860;</span> <p>-</p> </div> <div id="sixes"> <span class="dice">&#9861;</span> <p>-</p> </div> <div id="dice"> <button id="roll-button"><span class="dice">&#9858;</span></button> </div> <div id="totals"> <p>Total rolls: <span>0</span></p> </div> </div> <;-- Template for dice roll 1 --> <template id="template1"><span class="dice">&#9856;</span></template> <;-- Template for dice roll 2 --> <template id="template2"><span class="dice">&#9857;</span></template> <;-- Template for dice roll 3 --> <template id="template3"><span class="dice">&#9858;</span></template> <!-- Template for dice roll 4 --> <template id="template4"><span class="dice">&#9859;</span></template> <!-- Template for dice roll 5 --> <template id="template5"><span class="dice">&#9860;</span></template> <!-- Template for dice roll 6 --> <template id="template6"><span class="dice">&#9861;</span></template>

Answer 1

我不理解您的所有代碼，但我認為您應該從單擊按鈕事件偵聽器中編寫 rollDice 事件偵聽器，因為在您的示例中，事件在文檔偵聽此事件之前觸發。

btn.addEventListener('click', () => {
   // do something
   rollDice()
})

document.addEventListener('rollDice', () => {
   // do something
})

Answer 2

首先，不要在eventListener中輸入不必要的代碼。 如果您將代碼重構為一個方法，您會發現您試圖在事件偵聽器中創建一個事件偵聽器。 以下是應該如何設置 eventListener：

btn.addEventListener('click', rollDice);

我不明白你為什么在rollDice()中創建一個事件監聽器。 那是任務的一部分嗎？ 我只是立即調用了正確的方法。

我做的第二部分是通過查看代碼中的相似性來嘗試減少代碼。 我可以使用:nth-child選擇器通過隨機擲骰獲得合適的骰子容器。

rollsDiv.querySelector(`div:nth-child(${roll}) > p`)

第三件要記住的事情是編寫盡可能短的方法，讓它們最多做一件事。 如果您做不到，請嘗試將方法編寫為目錄。 一個人應該能夠閱讀代碼並通過代碼的編寫方式理解正在發生的事情。 這意味着重構復雜代碼，如getCorrectDiceElement() ，或使用變量並命名它們以使每一行易於理解。

這些是中間編碼的更多技巧，但事先了解這一點可能會很好。 不然你自己的代碼半年后再看也看不懂。 :)

作為禮物，我添加了另外四行 (a, b) 用於我猜您將來想要實現的功能。 祝你好運！

 const rollsDiv = document.getElementById("rolls"); // const totalsDiv = document.getElementById("totals"); // a const btn = document.getElementById("roll-button"); // var numberOfRolls = 0; // a const randomize = (max = 6, min = 1) => { return Math.floor(Math.random() * max) + min; }; const rollDice = () => { var roll = randomize(); let diceElement = getCorrectDiceElement(roll); let previousNumber = toNumber(diceElement.textContent); // let diceSymbol = document.getElementById("template" + roll).textContent; // b // console.log(roll, diceElement.parentNode.id) previousNumber++; // numberOfRolls++; // a diceElement.textContent = previousNumber; } const getCorrectDiceElement= (roll) => { return rollsDiv.querySelector(`div:nth-child(${roll}) > p`) } function toNumber(a) { return isNaN(a)? 0: a; } btn.addEventListener('click', rollDice);

 #rolls { display: flex; margin-bottom: 1rem; } #rolls > div, #roll-button { text-align: center; font-size: 2rem; padding: 0rem 1rem; } #rolls p { margin: 0; }

 <h2>Dice Rolls</h2> <div id="rolls"> <div id="ones"> <span class="dice">&#9856;</span> <p>-</p> </div> <div id="twos"> <span class="dice">&#9857;</span> <p>-</p> </div> <div id="threes"> <span class="dice">&#9858;</span> <p>-</p> </div> <div id="fours"> <span class="dice">&#9859;</span> <p>-</p> </div> <div id="fives"> <span class="dice">&#9860;</span> <p>-</p> </div> <div id="sixes"> <span class="dice">&#9861;</span> <p>-</p> </div> </div> <div> <div id="dice"> <button id="roll-button">Roll</button> </div> <div id="totals"> <p>Total rolls: <span>0</span></p> </div> </div> <;-- Template for dice roll 1 --> <template id="template1"><span class="dice">&#9856;</span></template> <;-- Template for dice roll 2 --> <template id="template2"><span class="dice">&#9857;</span></template> <;-- Template for dice roll 3 --> <template id="template3"><span class="dice">&#9858;</span></template> <!-- Template for dice roll 4 --> <template id="template4"><span class="dice">&#9859;</span></template> <!-- Template for dice roll 5 --> <template id="template5"><span class="dice">&#9860;</span></template> <!-- Template for dice roll 6 --> <template id="template6"><span class="dice">&#9861;</span></template>

[編輯] 添加回原來的 rollDice() 方法。

 const rollsDiv = document.getElementById("rolls"); // const totalsDiv = document.getElementById("totals"); // a const btn = document.getElementById("roll-button"); // var numberOfRolls = 0; // a const randomize = (max = 6, min = 1) => { return Math.floor(Math.random() * max) + min; }; const rollDice = () => { // NEW let eventName = "rollDice"; let eventDetail = {'value': randomize()}; let eventProperties = {detail: eventDetail, 'bubbles': true, 'cancelable': false}; let customEvent = new CustomEvent(eventName, eventProperties); document.dispatchEvent(customEvent); }; const handleDiceResult = (event) => { var eventDetail = event.detail; // NEW var roll = eventDetail.value; let diceElement = getCorrectDiceElement(roll); let previousNumber = toNumber(diceElement.textContent); // let diceSymbol = document.getElementById("template" + roll).textContent; // b // console.log(roll, diceElement.parentNode.id) previousNumber++; // numberOfRolls++; // a diceElement.textContent = previousNumber; } const getCorrectDiceElement= (roll) => { return rollsDiv.querySelector(`div:nth-child(${roll}) > p`); } function toNumber(a) { return isNaN(a)? 0: a; } btn.addEventListener('click', rollDice); document.addEventListener('rollDice', handleDiceResult); // NEW

 #rolls { display: flex; margin-bottom: 1rem; } #rolls > div, #roll-button { text-align: center; font-size: 2rem; padding: 0rem 1rem; } #rolls p { margin: 0; }

 <h2>Dice Rolls</h2> <div id="rolls"> <div id="ones"> <span class="dice">&#9856;</span> <p>-</p> </div> <div id="twos"> <span class="dice">&#9857;</span> <p>-</p> </div> <div id="threes"> <span class="dice">&#9858;</span> <p>-</p> </div> <div id="fours"> <span class="dice">&#9859;</span> <p>-</p> </div> <div id="fives"> <span class="dice">&#9860;</span> <p>-</p> </div> <div id="sixes"> <span class="dice">&#9861;</span> <p>-</p> </div> </div> <div> <div id="dice"> <button id="roll-button">Roll</button> </div> <div id="totals"> <p>Total rolls: <span>0</span></p> </div> </div> <;-- Template for dice roll 1 --> <template id="template1"><span class="dice">&#9856;</span></template> <;-- Template for dice roll 2 --> <template id="template2"><span class="dice">&#9857;</span></template> <;-- Template for dice roll 3 --> <template id="template3"><span class="dice">&#9858;</span></template> <!-- Template for dice roll 4 --> <template id="template4"><span class="dice">&#9859;</span></template> <!-- Template for dice roll 5 --> <template id="template5"><span class="dice">&#9860;</span></template> <!-- Template for dice roll 6 --> <template id="template6"><span class="dice">&#9861;</span></template>