I am having a lot of trouble getting any javascripts to run in my Ruby application.
(我很难在Ruby应用程序中运行任何JavaScript。)
Currently my console is giving me one error message:
(目前，我的控制台正在向我显示一条错误消息：)
" Uncaught TypeError: Cannot read property 'clientWidth' of undefined "
(“ 未捕获的TypeError：无法读取未定义的属性'clientWidth')
This error is referencing this line in my application.js file:
(此错误引用了我的application.js文件中的这一行：)
const size = carouselImages[0].clientWidth;
I'm guessing it's saying it has no idea what clientWidth is?
(我猜这是在说不知道clientWidth是什么？)
I was following along with this tutorial when I hit this roadblock. (当我遇到这个障碍时，我一直在跟随本教程 。)
(He's not making a rails app, but his script loads fine.) The script also loaded fine for me when I created a regular index.html page not tied to my ruby app. (（他不是在开发Rails应用程序，但是他的脚本可以很好地加载。）当我创建一个不与我的ruby应用程序绑定的常规index.html页面时，脚本也可以很好地加载。)
How do I define clientWidth/do I need to? (如何定义clientWidth /需要？)
My Rails files:
(我的Rails文件：)
Gem File
(宝石文件)
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
(_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
(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
(slide.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
(slide.scss)
/* This is for a test slider */
.carousel-container {
width: 1000px;
border: 5px solid black;
}
.carousel-slide {
display: flex;
img{
width: 1000px;
height: auto;
}
}
Here is an imgur link to see a screenshot of my ruby app vs. a regular .html file I created to compare/contrast what is going on: https://imgur.com/a/jVhjLd3
(这是一个imgur链接，用于查看我的ruby应用程序和我创建的常规.html文件的屏幕截图，以比较/对比正在发生的事情： https : //imgur.com/a/jVhjLd3)
Here are the versions I am running of things:
(这是我正在运行的版本：)
Ruby : ruby 2.5.0p0 (2017-12-25 revision 61468) [x86_64-linux]
(Ruby ：ruby 2.5.0p0（2017-12-25修订版61468）[x86_64-linux])
Node : v13.2.0
(节点 ：v13.2.0)
NPM : 6.13.1
(NPM ：6.13.1)
I tried a few different suggestions found via google searches (a la 'get fixed quick'), so if anything is off or out of place, please point it out to me.
(我尝试了一些通过Google搜索找到的不同建议（“快速修复问题”），因此，如果有任何异常或异常之处，请向我指出。)
If you require more info/code, I will be happy to provide. (如果您需要更多信息/代码，我们将很乐意提供。)
Any help getting my Javascript to run would be greatly appreciated!
(任何帮助我运行Javascript的帮助将不胜感激！)
ask by madeofquartz translate from so 
