如何在动态操作中单击按钮时调用 Oracle APEX 中的 javascript 函数？

Question

我有 javascript 个秒表，我想用 oracle apex 按钮开始停止。我创建按钮并使用 Execute 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

我不太确定，因为您的问题描述不是 100% 清楚，但是动态操作是如何连接到您的按钮的？

您使用 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>

将以下内容添加到页面的 Execute when Page Loads 属性中。这将创建一个 JavaScript 模块（显示模块模式），它只公开两个函数，这些函数后来作为全局方法添加到 window 对象上：

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。对于开始按钮，请务必将静态 ID 设置为 START。

然后为点击事件开始按钮创建一个动态动作。将操作设置为执行 JavaScript 代码并将代码设置为 startStop();

最后，为点击事件RESET按钮添加一个Dynamic Action。将操作设置为执行 JavaScript 代码为 reset();

一些注意事项：

HTML 不再有按钮，示例使用常规的 APEX 按钮。更新
我缓存了 HTML 元素，因为它们被频繁引用。
因为代码使用了暴露模块模式，所以只需要全局暴露两个函数。

如何在动态操作中单击按钮时调用 Oracle APEX 中的 javascript 函数？

How to call javascript Function in Oracle APEX on button click in dynamic action?

javascript

jquery

stopwatch

oracle-apex