时间戳

首页 > 解决方案 > 设置按钮监听器

javascript - 设置按钮监听器

问题描述

我的网站上的按钮有问题。我是从同事那里拿到的，想改变按键的功能。

目前，这是直接在 HTML 中解决的。看起来像这样：

<table class="formButtons">
  <tr>
    <td>
      <form method="post">
        <p> <input name='"Variable".allowStart' value="1" type="hidden"> </p>
        <p> <input class="Start" value="Start" type="submit"> </p>
      </form>
    </td>
    <td>
      <form method="post">
        <p> <input name='"Variable".allowStart' value="0" type="hidden"> </p>
        <p> <input class="Stop" value="Stop" type="submit"> </p>
      </form>
    </td>
  </tr>
</table>

当按下开始或停止按钮时，会重新加载整个页面。我不要那个。

如您所见，我的变量'“Variable”.allowStart“'被调用并设置为value = 1。现在我想在Javascript中将变量的值设置为1。但我不知道如何。你能帮我吗? 请详细回答，我是编程的初学者。

额外的信息：

'"Variable".allowStart'

是我从西门子 PLC 获得的变量。

它的工作原理如示例所示。我所要做的就是将变量作为注释添加到 HTML 文件中。像这样：

<!-- AWP_In_Variable Name='"Variable".allowStart' -->

标签： javascripthtmlplc

解决方案

我不明白你的'"Variable".allowStart'，但如果你能够在你的中使用它，javascript那么你可以继续这个答案。

要阻止Start&按钮重新加载页面，您可以通过使用来阻止元素Stop的默认行为，并从那里执行您想要的操作。inputpreventDefault()

查看修改后的 HTML 和javascript以下内容：

window.onload = function (){
  var start = document.getElementById('Start');
  var stop = document.getElementById('Stop');
  
  start.onclick = function (e) {
      e.preventDefault();

      //add desired code here
      console.log('Clicked Start');
  }

  stop.onclick = function (e) {
      e.preventDefault();

      //add desired code here
      console.log('Clicked Stop');
  }
}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Weird Buttons</title>
</head>
<body>
  <table class="formButtons">
  <tr>
    <td>
      <form method="post">
        <p> <input name='"Variable".allowStart' value="1" type="hidden"> </p>
        <p> <input id="Start" class="Start" value="Start" type="submit"> </p>
      </form>
    </td>
    <td>
      <form method="post">
        <p> <input name='"Variable".allowStart' value="0" type="hidden"> </p>
        <p> <input id="Stop" class="Stop" value="Stop" type="submit"> </p>
      </form>
    </td>
  </tr>
</table>

</body>
</html>

推荐阅读