设置按钮监听器答案

【问题标题】：Set up a button listener设置按钮监听器
【发布时间】：2020-12-21 20:05:29
【问题描述】：

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

目前，这是直接在 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' -->

【问题讨论】：

所以它提交表单与服务器对话。因此，您需要使用 Ajax/fetch 请求重新创建它。

标签： javascript html plc

【解决方案1】：

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

要阻止Start 和Stop 按钮重新加载页面，您可以使用preventDefault() 阻止input 元素的默认行为，然后从那里执行您想要的操作。

查看修改后的 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>

【讨论】：