rails6でajaxの応答を契機にjQueryのFadeInのような動作をJavaScriptで実装したい

Question

jQueryを使わずにrails6で、jQueryのFadeInの動作を実行したいのですが、うまく動作しません。
コンソールにはUncaught TypeError: Cannot read property 'style' of null at <anonymous>とのエラーが出ているので、読み込み順の問題かと思い、onload domcontentloadedも試してみようとしたのですが、そもそもajaxの場合、どのように機能するのかがわからず、困っております。

どのように実装したら以下のapp/views/ajxis/new.js.erbが動作するか、ご教示頂きいです。

教えて頂きたいこと
app/views/ajxis/new.js.erbを修正してlink_toで生成されたボタンを押下した時に、入力フォームが1秒かけてFadeInしてくるようにしたい

config/routes.rb

Rails.application.routes.draw do
  get 'ajxis', to: 'ajxis#index'
  get 'ajxis/new', to: 'ajxis#new'
  post 'ajxis/new', to: 'ajxis#create'
end

app/controllers/ajxis_controllers.rb

class AjxisController < ApplicationController
  def index
    @ajxis = Ajx.all
  end

  def new
    @ajxis = Ajx.new
    respond_to do |format|
      format.html
      format.js
    end
  end

  def create
    @ajxis = Ajx.all
    @ajx = Ajx.new(ajx_params)
    respond_to do |format|
      if @ajx.save
        format.html
        format.js
      else
        format.js {render :new}
      end
    end
  end

  private

  def ajx_params
    params.require(:ajx).permit([:name])
  end
end

app/views/ajxis/index.html.erb

<h1>Ajxモデル一覧</h1>
<table class="table" id="ajx">
  <%= render 'ajxis' %>
</table>
<%= link_to "データを追加する", ajxis_new_path, remote: true %>
<div id="ajx-form"></div>

↑このlink_toを押下した時に、以下のjsが着火します。

app/views/ajxis/new.js.erb

document.querySelector('#ajx-form').innerHTML = '<%= j(render 'form') %>';

var begin = new Date() - 0;
var myMain = document.getElementById("#ajx-form");
var myTime = 1000;
var id = setInterval(function() {
    var current = new Date() - begin;
    if (current > myTime){
        clearInterval(id);
        current = myTime;
    }
    myMain.style.opacity = current / myTime;
}, 10);

↑これが呼び出すフォームのパーシャルが以下です。
_app/views/ajxis/form.html.erb

<%= form_for :ajx, remote: true do |f| %>
  <%= f.text_field :name %>
  <%= f.submit %>
<% end %>

参考にさせて頂いたサイト
https://www.sejuku.net/blog/28967
https://q-az.net/without-jquery-fadein-fadeout-slideup-slidedown/

以上です。
何卒、よろしくお願いします。

Answer 1

解決しました。

app/views/ajxis/new.js.erb にて取得すべきid="ajx-form"をvar myMain = document.getElementById("#ajx-form");と指定していたことが問題でした。

正しくは#不要のvar myMain = document.getElementById("ajx-form");でした。

失礼しましたm(_ _)m

Answer 2

jQueryの使えないrails6

普通に使えばいいような気もしますが、なんらかの理由で使いたくないなら
fadeIn処理はcssで提供して、クラスのつけ外しなどで対応すればいいでしょう

Comments

[ZinKimura]

ご回答、ありがとうございます。
確かに、jQueryやCSSを使えば解決しますね。
質問の書き方が間違っておりました。どちらかというと、上記の状態でなぜ、app/views/ajxis/new.js.erbが動作しないのかを知りたいです。
質問を訂正します。申し訳ありませんm(_ _)m