如何启动一个功能，只有在一个按钮上点击

Question

我希望有我的网格风格的游戏开始一旦我点击我的页面上的开始按钮。目前，游戏开始只要我点击网格，但我希望这个函数被调用，只有当你点击开始按钮。

我已经创建了我的游戏板。可以使用createBoard()函数调用。这个板的造型全是我的创意和心血。

我尝试了以前在我的其他线程中给出的解决方案，并且仍然有一个问题，该函数仅在单击开始按钮时不调用。

这是我的回复:有什么反馈我做错了吗?谢谢!:)

https://replit.com/@batb WholeFrostyLocus

document.addEventListener('DOMContentLoaded', () => {
const grid = document.querySelector('.grid')
const startBtn = document.querySelector('.button-one')
const pauseBtn = document.querySelector('.button-two')
const scoreDisplay = document.querySelector('.score')
const countdown = document.querySelector('.countdown')
let paused = true
let score = 100
const width = 8
const squares = []
let isGameOver = false
let buzzyAmount = 12
let result = 0
const fiBuzz = [
'url(images/purple-fizzy.png)',
'url(images/buzzy-green.png)',
'url(images/new-moo-buzzy.png)',
'url(images/new-shiny-fizzy.png)'
]
//shuffled Arrays
function createBoard() {
const buzzArray = Array(buzzyAmount).fill('buzzy')
const emptyArray = Array(width * width - buzzyAmount).fill('valid')
const gameArray = emptyArray.concat(buzzArray)
const shuffledArray = gameArray.sort(() => Math.random() - 0.5)

for (let i = 0; i < width * width; i++) {
let randomNumber = Math.floor(Math.random() * fiBuzz.length)
let square = document.createElement('div')
square.setAttribute('id', i)
square.setAttribute('draggable', 'true')
square.classList.add(shuffledArray[i])
grid.appendChild(square)
squares.push(square)
square.style.backgroundImage = fiBuzz[randomNumber]

//normal click
square.addEventListener('click', function(e) {
click(square)
})
}

}

createBoard()
//check neighboring squares once square is clicked
function checkSquare(square, currentId) {
const isLeftEdge = (currentId % width === 0)
const isRightEdge = (currentId % width === width -1)
setTimeout(() => {
if (currentId > 0 && !isLeftEdge) {
const newId = squares[parseInt(currentId) -1].id
//const newId = parseInt(currentId) - 1   ....refactor
const newSquare = document.getElementById(newId)
click(newSquare)
}
if (currentId > 7 && !isRightEdge) {
const newId = squares[parseInt(currentId) +1 -width].id
//const newId = parseInt(currentId) +1 -width   ....refactor
const newSquare = document.getElementById(newId)
click(newSquare)
}
if (currentId > 10) {
const newId = squares[parseInt(currentId -width)].id
//const newId = parseInt(currentId) -width   ....refactor
const newSquare = document.getElementById(newId)
click(newSquare)
}
if (currentId > 11 && !isLeftEdge) {
const newId = squares[parseInt(currentId) -1 -width].id
//const newId = parseInt(currentId) -1 -width   ....refactor
const newSquare = document.getElementById(newId)
click(newSquare)
}
if (currentId < 38 && !isRightEdge) {
const newId = squares[parseInt(currentId) +1].id
//const newId = parseInt(currentId) +1   ....refactor
const newSquare = document.getElementById(newId)
click(newSquare)
}
if (currentId < 40 && !isLeftEdge) {
const newId = squares[parseInt(currentId) -1 +width].id
//const newId = parseInt(currentId) -1 +width   ....refactor
const newSquare = document.getElementById(newId)
click(newSquare)
}
if (currentId < 45 && !isRightEdge) {
const newId = squares[parseInt(currentId) +1 +width].id
//const newId = parseInt(currentId) +1 +width   ....refactor
const newSquare = document.getElementById(newId)
click(newSquare)
}
if (currentId < 48) {
const newId = squares[parseInt(currentId) +width].id
//const newId = parseInt(currentId) +width   ....refactor
const newSquare = document.getElementById(newId)
click(newSquare)
}
}, 10)
}

// game over
function gameOver(square) {
scoreDisplay.innerHTML = score + '<br>'+ ' You Lose :('
isGameOver = true
clearInterval(timerId)

// show ALL the badStars in gameOver 
squares.forEach(square => { 
if (square.classList.contains('buzzy')) {
square.appendChild(document.createElement('img')).src = 'images/fizz-buzz-mix.png'
square.classList.remove('buzzy')
square.classList.add('checked')
clearInterval(timerId)
}
})
}
function checkForWin() {
let matches = 0
for (let i = 0; i < squares.length; i++) {
if (score >= 100) {
scoreDisplay.innerHTML = score + ': ' + ' You Win!'
} else {
scoreDisplay.innerHTML = score + ': ' + ' You Lose!'
}
clearInterval(timerId)
}
}
// TIMER LOGIC
const startingMinutes = .25
let time = startingMinutes * 60
let timerId
let square
function countDown() {
let minutes = Math.floor(time / 60)
let seconds = time % 60
time--
console.log(minutes, 'minutes:', seconds, 'seconds')

if (time <= 0) {
checkForWin()
gameOver()
}
countdown.innerHTML = minutes + ' minutes ' + ': ' + seconds + ' seconds '
}

// add to right click
function click(square) {
let currentId = square.id
if (isGameOver) return
if (square.classList.contains('checked')) return score++
if (square.classList.contains('buzzy')) {
gameOver(square)
} else {
let total = square.getAttribute('data')
if (total !=0) {
square.classList.add('checked')
if (total == 1) square.classList.add('one')
if (total == 2) square.classList.add('two')
if (total == 3) square.classList.add('three')
if (total == 4) square.classList.add('four')
square.innerHTML = total
return
}
checkSquare(square, currentId)
}
square.classList.add('checked')
}

// START AND PAUSE LOGIC
function scoreFunction() {
if(square.classList.contains('valid')) {
score+=3
}
}
startBtn.addEventListener('click', () => {
if (paused === false) {
score++
return
}
scoreDisplay.innerHTML = 'Score' + ': ' + score++
paused = false
timerId = setInterval(countDown, 1000)
})
function pauseGame() {
paused = true
clearInterval(timerId) 
}
pauseBtn.addEventListener('click', () => {
pauseGame()
})

})

Answer 1

试着改变你的html按钮，这样它就会在你点击按钮时调用你想要的函数:

<button class="button-one" onclick="function_name"> Start </button>

在按钮上单击要调用的函数的名称，而不是fucntion_name。