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

Posted 2023-05-09

【中文标题】Rails 6 javascript文件没有正确抓取html元素

【英文标题】：Rails 6 javascript file isn't grabbing html element properly

【发布时间】：2020-12-17 18:12:30

【问题描述】：

javascript 新手。我正在按照 javascript 教程创建一个简单的 tictactoe 游戏，并且我正在尝试调整代码以在 Rails 上运行。

我有一个 JavaScript 文件，其中包含一个应该在单击 cell 元素后运行的函数。

当我加载页面时，script js file loaded 会从控制台中的console.log("script js file loaded") 显示，所以我知道正在加载 javascript 文件。

我怀疑 rails js 的语法和 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")

感谢您的帮助。

【问题讨论】：

第一关，js就是js； “rails js”没有什么特别之处。您的特定问题只是顺序之一。您的脚本在您查询的 DOM 之前加载，因此您的脚本无效。将脚本移动到正文的末尾是常见的做法（出于这个和其他原因），应该可以解决您的问题。有关更多详细信息和替代做法，请参阅 this answer。

【参考方案1】：

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

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