【发布时间】：2019-11-30 13:26:39
【问题描述】：
在我的 Ruby 应用程序中运行任何 javascript 时遇到了很多麻烦。
目前我的控制台正在给我一条错误消息：
“未捕获的 TypeError：无法读取未定义的属性 'clientWidth'”
这个错误是在我的 application.js 文件中引用了这一行：
const size = carouselImages[0].clientWidth;
我猜它是说它不知道 clientWidth 是什么？当我遇到这个障碍时，我正在关注this tutorial。 （他不是在制作 rails 应用程序，但他的脚本可以正常加载。）当我创建一个未绑定到我的 ruby 应用程序的常规 index.html 页面时，该脚本也可以正常加载。
如何定义 clientWidth/我需要定义吗？
我的 Rails 文件：
宝石文件
gem 'coffee-rails', '~> 4.2'
# Turbolinks makes navigating your web application faster. Read more: https://github.com/turbolinks/turbolinks
gem 'turbolinks', '~> 5'
# Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
gem 'jbuilder', '~> 2.5'
# Use Redis adapter to run Action Cable in production
# gem 'redis', '~> 4.0'
# Use ActiveModel has_secure_password
# gem 'bcrypt', '~> 3.1.7'
gem 'jquery-rails', '~> 4.3', '>= 4.3.3'
gem 'rails-ujs', '~> 0.1.0'
gem 'jquery-ui-rails'
_header.html.erb
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Page Title</title>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
<%= javascript_include_tag( 'slider.js' ) %>
</head>
<body> <!--Body and html tags are closed in my _footer.html.erb -->
application.js
//= require rails-ujs
//= require jquery
//= require jquery_ujs
//= require turbolinks
$(document).ready to $(document).on('turbolinks:load', function(main());
//image slider code
//
//
const carouselSlide = document.querySelector('.carousel-slide');
const carouselImages = document.querySelectorAll('.carousel-slide img');
//buttons
const prevBtn = document.querySelector('#prevBtn');
const nextBtn = document.querySelector('#nextBtn');
//Counter
let counter = 1;
const size = carouselImages[0].clientWidth;
carouselSlide.style.transform = 'translateX('+(-size * counter)+ 'px)';
slider.html.erb
<button id="prevBtn">Prev</button>
<button id="nextBtn">Next</button>
<br /><br />
<div class="carousel-container">
<div class="carousel-slide">
<%= image_tag("photo4.jpg", id: "lastClone") %>
<!-- photo1.jpg is an image of a road at sunset should have the border around it and be the focus. Currently, it is not. -->
<%= image_tag("photo1.jpg") %>
<%= image_tag("photo2.jpg") %>
<%= image_tag("photo3.jpg") %>
<%= image_tag("photo4.jpg") %>
<%= image_tag("photo1.jpg", id: "firstClone") %>
</div>
</div>
slider.scss
/* This is for a test slider */
.carousel-container {
width: 1000px;
border: 5px solid black;
}
.carousel-slide {
display: flex;
img{
width: 1000px;
height: auto;
}
}
这是一个 imgur 链接，可以查看我的 ruby 应用程序与我创建的常规 .html 文件的屏幕截图，以比较/对比正在发生的事情： https://imgur.com/a/jVhjLd3
这是我正在运行的版本：
Ruby：ruby 2.5.0p0（2017-12-25 修订版 61468）[x86_64-linux]
节点：v13.2.0
NPM：6.13.1
我尝试了一些通过谷歌搜索找到的不同建议（例如“快速修复”），所以如果有任何问题或不合适的地方，请指出来。如果您需要更多信息/代码，我很乐意提供。
任何帮助让我的 Javascript 运行将不胜感激！
【问题讨论】：
-
Cannot read property 'clientWidth' of undefined这个错误意味着carouselImages[0]未定义...请使用debugger并确保您正确获取所有图像
标签： javascript ruby-on-rails ruby