如何在动态操作中单击按钮时在 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

这是一个使用动态操作的示例，尽管大部分逻辑将在通过页面属性加载的 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。对于开始按钮，请务必将静态 ID 设置为 START。

然后为点击事件START按钮创建一个Dynamic Action。将action设置为Execute JavaScript Code，并将代码设置为startStop();

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

只是一些注意事项：

1. HTML 不再有按钮，该示例使用常规 APEX 按钮。更新的代码
2. 我缓存了 HTML 元素，因为它们被如此频繁地引用。
3. 由于代码使用显示模块模式，因此只需全局公开两个函数。

Answer 2

我不完全确定，因为您的问题描述不是 100% 清楚，但是动态操作如何与您的按钮相关联？

您使用 HTML 代码创建按钮，但这意味着该按钮在运行前不存在，并且您无法在页面设计器中为其分配动态操作？

您的 javascript 代码何时触发？因为我认为这就是你的代码没有被执行的问题。

答案：

如果你想生成这样的按钮，你需要为整个页面初始化你的函数。

在页面设计器中单击左侧的页面，然后转到右侧的："JavaScript" > "Function and Global Variable Declaration"，您必须在此处声明您的函数。

现在您在标题中创建的按钮可以使用startStop() 函数并执行您的代码。

我没有检查你的代码，所以我不知道它是否会按预期工作，但这样你至少可以执行它。