解決のアイディアをお持ちの方、ぜひご教授ください。よろしくお願いします。

前提・実装したいこと

Ruby on Railsの中で、javascriptを使って、範囲指定して印刷する機能を実装したい。

発生している問題・エラーメッセージ

印刷ボタンを押しても、印刷が実行されない。（何も起きません）
検証ツールでconsoleを確認したら、以下のエラーがありました。

console
1Uncaught TypeError: Cannot read property 'add' of undefined

分かっていること

範囲指定をしない印刷（表示されている全体の印刷）は実行できました。
javascriptで扱うid,class等は取得できていて、印刷以外の機能は動いています。

自分で調べたこと

contents.javascript内の変数hideの値がnullになっているので、
スタイルシートの.hideが取得できていないのが原因だ、というところまではわかりました。

この.hideは、現時点でビュー上で使われておらず、スタイルシート内にあるだけです。

やってみたこと

####1.
app/views/layouts/application.html.hamlに以下の記述を追加

      = stylesheet_link_tag 'print', media: 'print', 'data-turbolinks-track': 'reload'

app/assets/stylesheets/print.scss を追加（下記コードを参照ください）

結果：うまくいきませんでした。

####2.
app/assets/stylesheets/modules/_contents.scssに、以下の記述を追加（片方ずつ試しました）

@media print{
  .hide {
      display: none;
    }
}

  .hide {
      display: none;
    }

結果：どちらもうまくいきませんでした。

今回の問題に関係あると思われるコード

haml
1-# app/views/layouts/application.html.haml
2!!!
3%html
4  %head
5    %meta{:content => "text/html; charset=UTF-8", "http-equiv" => "Content-Type"}/
6    %title Teacher's Bar
7    = csrf_meta_tags
8    = csp_meta_tag
9
10
11    -# スタイルシートの参照先
12    = stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload'
13
14    -# 自分で検索して、入れてみた部分（記述しても問題解決せず） 
15    = stylesheet_link_tag 'print', media: 'print', 'data-turbolinks-track': 'reload'
16
17
18    = javascript_include_tag 'application'
19  %body
20
21    = yield

scss
1// app/assets/stylesheets/print.scss
2
3  .hide {
4    display: none;
5  }
6

javascript
1// app/assets/javascripts/contents.js
2
3// （抜粋）
4// 印刷範囲を指定して、印刷を実行するコード
5window.addEventListener("load", function () {
6  let printBtn = document.getElementById("print");
7  printBtn.addEventListener("click", function() {
8    let hideRange = document.querySelectorAll(".leftSide, .header");
9    let hide = document.querySelector(".hide"); //← mix-peachさん、ありがとうございます！
10
11    console.log(hide);　     　　　　　　　 // ←この部分で、hideの値がnull
12    hideRange.classList.add(hide);       // ←この部分で、エラーが出る。　　
13    window.print();
14    hideRange.classList.remove(hide);
15  });

mix-peach

2020/09/25 00:22 編集

let hide = document.querySelector("hide"); クラス指定の先頭ドットが足りてないだけかも？ let hide = document.querySelector(".hide");

suga_prog

2020/09/25 10:43

mix-peachさん、ご指摘ありがとうございます。クラスセレクタを取得するときは、ドットが必要なんですね。ってか、その前の行で使ってるやん、自分… 修正しました。ただ、挙動については変わりませんでした。

no1knows

2020/09/27 02:37

下記が参考になるかもしれません。 https://teratail.com/questions/231849

suga_prog

2020/09/27 13:50

no1knowsさん、ご意見ありがとうございました。参考にさせていただき、必要な値を取得することができました！印刷にはまだ至っていませんが、試行錯誤をしてみようと思います。

行動規範の内容に同意します

回答1件

値を正しく取得しても期待した動作ができない場合、つまりJSが適切に設定されている場合、Turbolinksを利用していることの影響かもしれません。

そんなときは下記で解決できるかもしれません。

JavaScript
1document.addEventListener("turbolinks:load", function(){
2    ... // ここにコード
3})

turbolinksの場合、ページ遷移をしてもwindow以下のオブジェクトの状態が保たれる(メモリ上に残る)。
またwindow.onLoadイベントは、最初のページの表示時以外は呼ばれない。

そのため変わりに、画面表示時にはturbolinks:loadイベントが発行される。
このイベントを監視することで、ページ遷移ごとの処理を実装できる。

参考：https://qiita.com/morrr/items/54f4be21032a45fd4fe9

投稿2020/09/27 14:33

no1knows

総合スコア3365