设置按钮监听器

Question

我网站上的按钮有问题。从同事那里拿来的，想改一下按键的功能

目前这直接在 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"'并将其设置为值=1。现在我想在Javascript中将变量的值设置为1。但是我不知道怎么办。你能帮帮我吗？请详细回答，我是编程的初学者。

补充信息：

'"Variable".allowStart'

是我从我的西门子 PLC 得到的一个变量。

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

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

Answer 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>

设置按钮监听器

Set up a button listener

html

javascript

plc