如何在 JS 中为我​​的 ruby​​ 应用程序定义 clientWidth？

Question

在我的 Ruby 应用程序中运行任何 javascripts 时遇到了很多麻烦。

目前我的控制台给了我一条错误消息：

“未捕获的类型错误：无法读取未定义的属性‘clientWidth’ ”

此错误引用了我的application.js文件中的这一行：

const size = carouselImages[0].clientWidth;

我猜它是说它不知道 clientWidth 是什么？ 当我遇到这个障碍时，我一直在学习本教程。 （他不是在制作 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 -->

应用程序.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)';

滑块.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>

滑块.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

以下是我正在运行的版本：

红宝石：红宝石 2.5.0p0（2017-12-25 修订版 61468）[x86_64-linux]

节点：v13.2.0

新产品管理：6.13.1

我尝试了通过谷歌搜索找到的一些不同的建议（la 'get fix quick'），所以如果有任何不妥或不合适的地方，请向我指出。 如果您需要更多信息/代码，我很乐意提供。

任何让我的 Javascript 运行的帮助将不胜感激！

Answer 1

它与ruby无关，而是与javascript本身有关。

问题出在 querySelectorAll 上，它没有返回正确的值 + 我建议不要使用它，因为并非每个浏览器都支持它。 所以只需为每个图像添加一个类，一切都会变得更容易:)

一个为您工作的演示：

<div class="carousel-slide"> 
<%= image_tag("photo4.jpg", id: "lastClone"), class: "imgCarousel" %> 
<%= image_tag("photo1.jpg"), class: "imgCarousel" %> 
<%= image_tag("photo2.jpg"), class: "imgCarousel" %>
</div>

在 javascript 中：

x = document.getElementsByClassName("imgCarousel")[0];
console.log(x.clientWidth)

演示（带有 JS 和 html ）：

 function myFunction() { x=document.getElementsByClassName("imgCarousel")[0]; console.log(x.clientWidth) document.getElementById("widthContainer").innerHTML = x.clientWidth }

 <body> <img class="imgCarousel" src="https://www.w3schools.com/jsref/compman.gif" > <img class="imgCarousel" src="https://www.w3schools.com/jsref/compman.gif" > <img class="imgCarousel" src="https://www.w3schools.com/jsref/compman.gif" > <p id="widthContainer">Click the button to get clientWidth of first image.</p> <button onclick="myFunction()">Try it</button> </body>