Rails 6 javascript 文件没有正确抓取 html 元素

Question

New to Javascript. I'm following a javascript tutorial to create a simple tictactoe game and I'm trying to adapt the code to work on Rails.

I have a JavaScript file with a function that is supposed to run once cell element is clicked.

When I load the page script js file loaded is displayed from console.log("script js file loaded") in the console so i know the javascript file is being loaded.

I suspect the rails js syntax is a little different from vanilla js?

app/views/tictactoe/index.html.erb :

<%= javascript_pack_tag 'script' %>

<div class="board" id="board">
    <!--- add data cell so can access in javascript   -->
    <div class="cell" data-cell></div>
    <div class="cell" data-cell></div>
    <div class="cell" data-cell></div>
    <div class="cell" data-cell></div>
    <div class="cell" data-cell></div>
    <div class="cell" data-cell></div>
    <div class="cell" data-cell></div>
    <div class="cell" data-cell></div>
    <div class="cell" data-cell></div>

</div>

app/javascript/packs/script.js

const cellElements = document.querySelectorAll('[data-cell]')

// loop through each cell, add event listener, every time cell is clicked, add this listener (handleClick),
// once:true --> once clicked once, wont fire again
cellElements.forEach(cell => {
    cell.addEventListener('click', handleClick, {once: true})
})

function handleClick(e){
    console.log('clicked')
}

console.log("script js file loaded")

Any help is appreciated thank you.

Answer 1

@numbers1311407 是正确的，在您的application.html.erb您可以使用defer:true使您的 JS 在加载 DOM 后运行。

<%= javascript_pack_tag 'application', defer: true %>