Function 頁面加載后發布，而不是點擊后發布

Question

我正在嘗試制作一個小兔子農場的游戲。 我的編程水平是初學者。

1. 為什么 addRabbit() 代碼在頁面加載后開始工作？ 單擊“購買兔子”按鈕后，我將其編寫為工作
2. 為什么兔子沒有出現在“賣兔子”和“買兔子”按鈕附近的頁面上？
3. 我知道就我是初學者而言，我在這里有很多問題。 我可以請你提及其中任何一個嗎？

 // VARIABLES // variables for modal of chosing rabbits const chooseModal = document.querySelector(".choose-modal"); const selectRabbitBtn = document.querySelector(".choose-rabbit-btn"); const rabbitSelects = document.querySelectorAll("input[type=radio]"); let chosenRabbitUrl = "img/rabbit1.png"; // start screen const startScreenDiv = document.querySelector(".story-modal"); const rabbit = document.querySelector("img.rabbit"); const buyRabbitBtn = document.querySelector(".buy-btn"); // EVENT LISTENERS selectRabbitBtn.addEventListener("click", chooseTheRabbit); // FUNCTIONS function chooseTheRabbit(e){ e.preventDefault(); for (let rabbit of rabbitSelects) { if (rabbit.checked) { chosenRabbitUrl = `img/${rabbit.id}.png`; break; } } chooseModal.style.display = "none"; startScreen(); } function startScreen() { startScreenDiv.style.display = "block"; rabbit.src = chosenRabbitUrl; } class RabbitGame { constructor() { this.rabbitsCount = parseInt(document.querySelector(".rabbits-count").innerText, 10); this.rabbitsCountSpan = document.querySelector(".rabbits-count"); this.rabbitsShowDiv = document.querySelector(".rabbits-count-show"); this.coinsCount = parseInt(document.querySelector(".coins-count").innerText, 10); this.coinsCountSpan = document.querySelector(".coins-count"); this.sellRabbitBtn = document.querySelector(".sell-btn"); this.myRabbits = [{age: 0, src: chosenRabbitUrl, width: 50}]; }; // function, that shows rabbits on the page, that the owner have // adult rabbits should be bigger, little rabbits smaller showRabbits() { // rabbit.src = chosenRabbitUrl this.myRabbits.forEach((rabbit) => { this.rabbitsShowDiv.innerHTML += `<img src="${rabbit.src}" width="${rabbit.width}">`}); }; // function that adds a rabbit, if the owner doesn't have any coin, rabbits eat him addRabbit() { console.log("Hello"); if (this.coinsCount > 1) { // remove 1 coin this.coinsCount -= 1 console.log(this.coinsCount); // show 1 coin less this.coinsCountSpan.innerText = this.coinsCount // add 1 for rabbits age // if the rabbit is older than 4, make him bigger on screen this.myRabbits.forEach((rabbit) => { rabbit.age +=1; if (rabbit.age > 3) { rabbit.width = 70 } }) // add 1 more rabbit to array this.myRabbits.push({age: 0, src: chosenRabbitUrl, width: 50}); // show 1 more rabbit this.rabbitsShowDiv.innerHTML += `<img src="${rabbit.src}" width="${rabbit.width}">` } }; // функция, которая продает кролика, если он взрослый // если нет взрослых кроликов, выводит предупреждение, что нет взрослых кроликов } const rabbitGame = new RabbitGame(); rabbitGame.showRabbits; buyRabbitBtn.addEventListener("click", rabbitGame.addRabbit());

 /* GENERAL */ * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: sans-serif; } h3 { background-color: rgb(108, 165, 55); width: 400px; height: 30px; padding: 5px; color: white; text-align: center; } button { padding: 5px 20px; background-color: rgb(194, 89, 89); color: white; text-transform: uppercase; border: none; font-weight: bold; } button:hover { background-color: rgb(172, 79, 84); } /* END OF GENERAL */ /* CHOOSE RABBIT MODAL & RULES MODAL */.choose-modal, .rules-modal { display: flex; justify-content: center; margin-top: 20px; }.choose-modal > div { display: flex; flex-direction: column; } input[type="radio"] { opacity: 0; } label > img:hover { border-bottom: 1px solid rgb(199, 199, 199); } ul { list-style: none; margin: 10px; } li { margin-bottom: 5px; }.button-div { display: flex; justify-content: center; } /* END OF CHOOSE RABBIT MODAL & RULES MODAL */ /* START SCREEN */ /*.story-modal { display: none; } */.story-modal { background-image: url("img/neighbour.jpg"); background-size: cover; height: 100vh; position: relative; } img.rabbit { position: absolute; height: 40%; top: 60%; left: 50%; overflow: hidden; }.story-modal > h3 { position: absolute; margin-left: auto; margin-right: auto; left: 0; right: 0; top: 5%; }.img-overlay { width: 100%; height: 100%; background: rgba(61, 61, 61, 0.3); }.story-modal > button { position: absolute; margin-left: auto; margin-right: auto; left: 0; right: 0; top: 13%; } /* END OF START SCREEN */ /* MAIN GAME */.main-game { display: flex; } /* END OF MAIN GAME */

 <div class="choose-modal"> <div> <div class="choose-modal-header"> <h3>Please, choose the rabbit</h3> </div> <div> <label for="rabbit1"><input type="radio" id="rabbit1" name="rabbits" value="rabbit1"><img src="img/rabbit1.png" width="100" alt="rabbit1"></label> <label for="rabbit2"><input type="radio" id="rabbit2" name="rabbits" value="rabbit2"><img src="img/rabbit2.png" width="100" alt="rabbit2"></label> <label for="rabbit3"><input type="radio" id="rabbit3" name="rabbits" value="rabbit3"><img src="img/rabbit3.png" width="80" alt="rabbit3"></label> </div> <div class="button-div"> <button type="submit" value="Choose" class="choose-rabbit-btn">Choose</button> </div> </div> </div> <div class="story-modal"> <div class="img-overlay"></div> <h3>Your pretty neighbour gave you a rabbit</h3> <img alt="rabbit" src="#" class="rabbit"> <button>Rules</button> </div> <div class="rules-modal"> <div> <h3>Rules of game</h3> <div> <ul> <li>Buy grass to feed the rabbits</li> <li>Sell adult rabbits</li> <li>Buy new little rabbits</li> </ul> </div> <div class="button-div"> <button>Play</button> </div> </div> </div> <div class="main-game"> <div class=" navbar"> <p><img src="img/coin.png" height="20"> Coins <span class="coins-count">10</span></p> <p class="name-of-gamer">Anonymous</p> <p><img src="img/rabbit.png" height="20"> Rabbits <span class="rabbits-count">3</span></p> </div> <div class="rabbits-count-show"></div> <div> <button class="sell-btn">Sell Rabbit</button> <button class="buy-btn">Buy Rabbit</button> </div> </div>

Answer 1

換行

buyRabbitBtn.addEventListener("click", rabbitGame.addRabbit());

至

buyRabbitBtn.addEventListener("click", rabbitGame.addRabbit);

（只需刪除那些括號）應該可以工作。 當您添加括號時，將調用 function，這不是您想要的。 單擊按鈕時，事件偵聽器會調用您的 function 本身。 對於第二個問題，您必須在 function 中添加括號才能被調用，從而執行其中的代碼。

注意：不要將不必要的文件發布到問題中。 嘗試找到可能發生錯誤的位置。 順便說一句，CSS 沒有導致 js 代碼錯誤的因素。 有時 html 會。 我知道作為初學者很難找到導致錯誤的區域，但隨着時間的推移會變得更容易。