uncaught ReferenceError: tgl is not defined

huangapple go评论73阅读模式
英文:

uncaught ReferenceError: tgl is not defined

问题

我不太清楚导致错误的原因,因为我对JavaScript不熟悉。我在标头中使用了js引用变量:

document.addEventListener('DOMContentLoaded', function() {
  var calendarEl = document.getElementById('calendar');
  var calendar = new FullCalendar.Calendar(calendarEl, {          
    selectable: true,
    selectHelper: true,
    select: function date(start, end, alldays){
      $("#BookingModal").modal('toggle');
      var tgl=moment(start).format('DD-MM-YYYY')
    }
  });
  
  calendar.render();
});

当我在HTML主体中使用变量时,它会抛出错误:

未捕获的ReferenceError: tgl未定义

<h1 class="modal-title fs-5" id="exampleModalLabel"> <script type="text/javascript">document.write(tgl)</script></h1>

请注意,您需要确保在引用变量之前定义它,否则会导致"未定义"错误。

英文:

I dont really know what is causing the error since I'm new to JavaScript. I've referenced the variable in the header with js:

document.addEventListener(&#39;DOMContentLoaded&#39;, function() {
  var calendarEl = document.getElementById(&#39;calendar&#39;);
  var calendar = new FullCalendar.Calendar(calendarEl, {          
    selectable: true,
    selectHelper: true,
    select: function date(start, end, alldays){
      $(&quot;#BookingModal&quot;).modal(&#39;toggle&#39;);
      var tgl=moment(start).format(&#39;DD-MM-YYYY&#39;)
    }
  });
  
  calendar.render();
});

And when I want to use the variable in the body of the html, it throws the error:

> uncaught ReferenceError: tgl is not defined

&lt;h1 class=&quot;modal-title fs-5&quot; id=&quot;exampleModalLabel&quot;&gt; &lt;script type=&quot;text/javascript&quot;&gt;document.write(tgl)&lt;/script&gt;&lt;/h1&gt;

答案1

得分: 1

模态框标题应该根据所点击的日历单元格动态生成。

因此,您需要等待用户点击日历单元格,以了解在select回调中提供的startDate是什么。

下面的代码将在解析HTML时在页面加载时执行...
DOMContentLoaded触发后,将执行您的其余代码之前。

document.addEventListener("DOMContentLoaded", function () {
  // 在全局范围内声明tgl变量
  let tgl;

  // 在模态框打开时,设置模态框标题
  $("#BookingModal").on("show.bs.modal", function (event) {
    $("#BookingModal").find(".modal-title").text(tgl);
  });

  // FulCalendar
  var calendarEl = document.getElementById("calendar");
  var calendar = new FullCalendar.Calendar(calendarEl, {
    selectable: true,
    select: function date(start, end, alldays) {
      // 在此处设置tgl
      tgl = moment(start.startStr).format("DD-MM-YYYY");

      // 打开模态框
      $("#BookingModal").modal("show");
    }
  });

  calendar.render();
});

请注意,我使用了start.startStr传递给moment.js。您可以在FullCalendar中控制台记录start对象,以了解原因。

英文:

The modal title you whish to have is dynamic based on the calendar cell that was clicked.

So you have to wait for the user to click on a calendar cell to know what is the startDate provided in this select callback.

The code below will be exectuted on page load while parsing the HTML...
Long before the rest of your code that will execute after DOMContentLoaded has fired.

&lt;script type=&quot;text/javascript&quot;&gt;document.write(tgl)&lt;/script&gt;

The events are firing in this order and that is how tgl should be used in each of them:

  1. DOMContentLoaded -- tgl is declared
  2. FullCalendar's select -- tgl value is setted
  3. show.bs.modal -- tgl value is used

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

document.addEventListener(&quot;DOMContentLoaded&quot;, function () {
  // Have the tgl variable at global scope
  let tgl;

  // On modal open, set the modal title
  $(&quot;#BookingModal&quot;).on(&quot;show.bs.modal&quot;, function (event) {
    $(&quot;#BookingModal&quot;).find(&quot;.modal-title&quot;).text(tgl);
  });

  // FulCalendar
  var calendarEl = document.getElementById(&quot;calendar&quot;);
  var calendar = new FullCalendar.Calendar(calendarEl, {
    selectable: true,
    select: function date(start, end, alldays) {
      // Set tgl here
      tgl = moment(start.startStr).format(&quot;DD-MM-YYYY&quot;);

      // Open modal
      $(&quot;#BookingModal&quot;).modal(&quot;show&quot;);
    }
  });

  calendar.render();
});

<!-- language: lang-html -->

&lt;link href=&quot;https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css&quot; rel=&quot;stylesheet&quot;/&gt;
&lt;script src=&quot;https://code.jquery.com/jquery-3.2.1.slim.min.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;https://cdn.jsdelivr.net/npm/fullcalendar@6.0.2/index.global.min.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.4/moment.min.js&quot;&gt;&lt;/script&gt;

&lt;div id=&quot;calendar&quot;&gt;&lt;/div&gt;

&lt;div class=&quot;modal fade&quot; id=&quot;BookingModal&quot; tabindex=&quot;-1&quot; role=&quot;dialog&quot; aria-labelledby=&quot;exampleModalLabel&quot; aria-hidden=&quot;true&quot;&gt;
  &lt;div class=&quot;modal-dialog&quot; role=&quot;document&quot;&gt;
    &lt;div class=&quot;modal-content&quot;&gt;
      &lt;div class=&quot;modal-header&quot;&gt;
        &lt;h5 class=&quot;modal-title&quot;&gt;This title will be replaced&lt;/h5&gt;
        &lt;button type=&quot;button&quot; class=&quot;close&quot; data-dismiss=&quot;modal&quot; aria-label=&quot;Close&quot;&gt;
          &lt;span aria-hidden=&quot;true&quot;&gt;&amp;times;&lt;/span&gt;
        &lt;/button&gt;
      &lt;/div&gt;
      &lt;div class=&quot;modal-body&quot;&gt;
        Some modal body here...
      &lt;/div&gt;
      &lt;div class=&quot;modal-footer&quot;&gt;
        &lt;button type=&quot;button&quot; class=&quot;btn btn-secondary&quot; data-dismiss=&quot;modal&quot;&gt;Close&lt;/button&gt;
        &lt;button type=&quot;button&quot; class=&quot;btn btn-primary&quot; data-dismiss=&quot;modal&quot;&gt;Ok&lt;/button&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;

<!-- end snippet -->

CodePen

Also, notice I used start.startStr to pass to moment.js. You can console log that start object of FullCalendar to understand why.

huangapple
  • 本文由 发表于 2023年1月9日 05:30:46
  • 转载请务必保留本文链接:https://go.coder-hub.com/75051456.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定