Как вызвать функцию JavaScript в Oracle APEX при нажатии кнопки в динамическом действии?

Question

У меня есть javascript секундомера, который я хочу начать останавливать нажатием кнопки oracle apex. я создаю кнопку и создаю динамическое действие с помощью выражения «Выполнить Javascript» и вставляю javasctipt, но он не запускается.

var x;
var startstop = 0;

function startStop() { /* Toggle StartStop */

  startstop = startstop + 1;

  if (startstop === 1) {
    start();
    document.getElementById("start").innerHTML = "Stop";
  } else if (startstop === 2) {
    document.getElementById("start").innerHTML = "Start";
    startstop = 0;
    stop();
  }

}


function start() {
  x = setInterval(timer, 10);
} /* Start */

function stop() {
  clearInterval(x);
} /* Stop */

var milisec = 0;
var sec = 0; /* holds incrementing value */
var min = 0;
var hour = 0;

/* Contains and outputs returned value of  function checkTime */

var miliSecOut = 0;
var secOut = 0;
var minOut = 0;
var hourOut = 0;

/* Output variable End */


function timer() {
  /* Main Timer */


  miliSecOut = checkTime(milisec);
  secOut = checkTime(sec);
  minOut = checkTime(min);
  hourOut = checkTime(hour);

  milisec = ++milisec;

  if (milisec === 100) {
    milisec = 0;
    sec = ++sec;
  }

  if (sec == 60) {
    min = ++min;
    sec = 0;
  }

  if (min == 60) {
    min = 0;
    hour = ++hour;

  }


  document.getElementById("milisec").innerHTML = miliSecOut;
  document.getElementById("sec").innerHTML = secOut;
  document.getElementById("min").innerHTML = minOut;
  document.getElementById("hour").innerHTML = hourOut;

}


/* Adds 0 when value is <10 */


function checkTime(i) {
  if (i < 10) {
    i = "0" + i;
  }
  return i;
}

function reset() {


  /*Reset*/

  milisec = 0;
  sec = 0;
  min = 0
  hour = 0;

  document.getElementById("milisec").innerHTML = "00";
  document.getElementById("sec").innerHTML = "00";
  document.getElementById("min").innerHTML = "00";
  document.getElementById("hour").innerHTML = "00";

}

это HTML-код. этот заголовок я добавил в статический контент. Я думаю, что эта функция должна вызывать кнопку oracle apex onclick = "startStop ()"

<h1>
  <span id="hour">00</span> :
  <span id="min">00</span> :
  <span id="sec">00</span> :
  <span id="milisec">00</span>
</h1>

<button onclick="startStop()" id="start">Start</button>
<button onclick="reset()">Reset</button>

Answer 1

Я не совсем уверен, потому что описание вашей проблемы не совсем понятно, но как динамическое действие связано с вашей кнопкой?

Вы создаете кнопку с помощью своего HTML-кода, но это означает, чтокнопка не существует до времени выполнения, и вы не можете назначить ей динамическое действие в конструкторе страниц?

Когда срабатывает ваш код JavaScript? Потому что я думаю, что именно по этой причине ваш код не выполняется.

Ответ:

Если вы хотите сгенерировать подобные кнопки, вам нужно инициализировать вашфункции для всей страницы.

В конструкторе страниц нажмите на свою страницу слева, а затем перейдите к: "JavaScript" > "Function and Global Variable Declaration" справа и там вы должны объявить свои функции.

Теперькнопка, которую вы создаете в своем заголовке, может использовать функцию startStop() и выполнит ваш код.

Я не проверял ваш код, поэтому не знаю, будет ли он работать так, как задумано, но таким образом вы по крайней мере сможете его выполнить.

Answer 2

Вот пример, который использует Динамические Действия, хотя большая часть логики будет в модуле JavaScript, загруженном через атрибуты страницы.

С учетом этого HTML (обратите внимание, что кнопок нет):

<div style="line-height: 1.5; font-size: 3.2rem; font-weight: 500">
  <span id="hour">00</span> :
  <span id="min">00</span> :
  <span id="sec">00</span> :
  <span id="milisec">00</span>
</div>

Добавьте следующее к Выполнить при загрузке страницы атрибута страницы. Это создаст модуль JavaScript (раскрывающий шаблон модуля), который предоставляет только две функции, которые позже добавляются в качестве глобальных методов для объекта окна:

var timerModule = (function() {
  var startElmtId = 'START';
  var miliSecElmtId = 'milisec';
  var secElmtId = 'sec';
  var minElmtId = 'min';
  var hourElmtId = 'hour';

  var $startBtn = $('#' + startElmtId);
  var timerRef;

  var milisec = 0;
  var sec = 0;
  var min = 0;
  var hour = 0;

  var miliSecOut = 0;
  var miliSecElmt = document.getElementById(miliSecElmtId);
  var secOut = 0;
  var secElmt = document.getElementById(secElmtId);
  var minOut = 0;
  var minElmt = document.getElementById(minElmtId);
  var hourOut = 0;
  var hourElmt = document.getElementById(hourElmtId);

  function startStop() {
    if (timerRef === undefined) {
      $startBtn.children('span').text("Stop");
      start();
    } else {
      $startBtn.children('span').text("Start");
      stop();
    }
  }

  function start() {
    timerRef = setInterval(timer, 10);
  }

  function stop() {
    clearInterval(timerRef);
    timerRef = undefined;
  }

  function timer() {
    miliSecOut = checkTime(milisec);
    secOut = checkTime(sec);
    minOut = checkTime(min);
    hourOut = checkTime(hour);

    milisec = ++milisec;

    if (milisec === 100) {
      milisec = 0;
      sec = ++sec;
    }

    if (sec == 60) {
      min = ++min;
      sec = 0;
    }

    if (min == 60) {
      min = 0;
      hour = ++hour;
    }

    miliSecElmt.innerHTML = miliSecOut;
    secElmt.innerHTML = secOut;
    minElmt.innerHTML = minOut;
    hourElmt.innerHTML = hourOut;
  }

  /* Adds 0 when value is <10 */
  function checkTime(i) {
    if (i < 10) {
      i = "0" + i;
    }
    return i;
  }

  function reset() {
    milisec = 0;
    sec = 0;
    min = 0
    hour = 0;

    miliSecElmt.innerHTML = "00";
    secElmt.innerHTML = "00";
    minElmt.innerHTML = "00";
    hourElmt.innerHTML = "00";
  }

  return {
    startStop: startStop,
    reset: reset
  };
})();

window.startStop = timerModule.startStop;
window.reset = timerModule.reset;

Затем создайте две кнопки, одну с именем START и другую с именем RESET. ,Для кнопки запуска убедитесь, что для статического идентификатора установлено значение START.

Затем создайте динамическое действие для кнопки START события щелчка. Установите действие Выполнить код JavaScript и установите код startStop();

Наконец, добавьте динамическое действие для кнопки сброса события щелчка. Задайте для действия «Выполнить код JavaScript» значение reset();

Несколько замечаний:

1. В HTML больше нет кнопок, в примере используются обычные кнопки APEX. Код, который обновляет
2. Я кэшировал элементы HTML, поскольку к ним так часто обращались.
3. Поскольку в коде используется шаблон раскрывающегося модуля, глобально должны быть доступны только две функции.