指定日Aから指定日Bの日数を自動計算して表示させたい

背景・実現したいこと

 タイトルの通り、日付範囲を指定してその日数をGaroonのワークフローのスペースに表示させたいと思っております。試してみたところ、ボタンの表示もされません。

 

javascript初心者なため、コードの記述もこれでよいのかどうか、ご教授いただければ幸いです。

 

エラー情報

ブラウザの開発者ツールのコンソールから下記エラーが出ています。

Uncaught TypeError: $ is not a function

Uncaught TypeError: jQuery is not a function

 

利用したソースコード

/*
* 日付計算のプログラム
*/

(function() {
"use strict";

garoon.events.on('workflow.request.create.show', function(event) {

//ボタンを作成
var space = garoon.workflow.request.getSpaceElement('calcDate');
if (space === null) {
swal('Error!');
return;
}

var calcDateEl = document.createElement('input');
calcDateEl.type = 'button';
calcDateEl.value = '日付計算';
calcDateEl.id = 'calcBtn';
space.appendChild(calcDateE1);
$('#calcBtn').click(function(){

//入力された日付データの値を取得する
var request = garoon.workflow.request.get();
var start = request.items.start.value;
var end = request.items.end.value;

//日付オブジェクトを作成
var date0 = new Date(start);
var date1 = new Date(end);

//差分を計算
var date_diff = date1.getTime() - date0.getTime();
//日数に換算
var diff_dd = date_diff/(24*60*60*1000);
//時間に換算
var diff_hh = date_diff/(60*60*1000);

//要素の中に値をセット
var calcDate = garoon.workflow.request.getSpaceElement('calcDate');
calcDate.items.calcDate.value = (diff_dd + '日');
garoon.workflow.request.set(calcDate);

});
return event;
});

})(jQuery.noConflict(true));

加藤さん

コンソールに表示されているエラーは、「$ は関数じゃないよ」「jQuery は関数じゃないよ」みたいなことを言っています。

以下は外部サイトですが、今回出ているエラーについて解説されているのでよろしければ参考にしてください。

「Uncaught TypeError: 変数名 is not a function」って何? https://tyrano-complete.blogspot.com/2020/02/what-is-this-uncaught-typeerror-is-not-function.html

 

今回のエラーは、ソースコードの中で jQuery という外部ライブラリを使用していると思いますが、
jQuery のライブラリがうまく読み込めていないことが原因なのではないかと考えます。

実際、以下のボタンを作成する部分で SweetAlert という外部ライブラリを使用していると思いますが、
「swal is not a function」みたいなエラーは出ていないと思います。

 //ボタンを作成
  var space = garoon.workflow.request.getSpaceElement('calcDate');
   if (space === null) {
    swal('Error!');
    return;
   }

SweetAlert を外部ライブラリとして読み込んだように、jQuery も設定してあげるとエラーは解消できそうです。

>mofuku 様

エラーの表示されていた箇所を修正したところ、エラー解消されました。

ただ思ったような動きにはならず…これは私のコーディングの問題ですね…

エラーが出たら文言を調べることを肝に銘じようと思います。

違う記事でも回答いただいて、何度もありがとうございます。指摘していただけるだけで、何に躓いていたのかわかるので大変助かります。