时间戳

首页 > 解决方案 > 提交按钮中的 Onclick 功能不起作用

javascript - 提交按钮中的 Onclick 功能不起作用

问题描述

所以这个网页正在与西门子 PLC 交互。共有三个按钮：一个启动进程；一停；和一个重置整个事情。一切都按预期工作，但 onclick 功能。

<img id="pic" src="Images/Status00.png" style="vertical-align: middle; margin: 0px; height: 70px;"> 
<input type="submit" value="Start" style="height: 45px; width: 150px" id="start" onclick="changePic('green')">
<input type="hidden" name='"web2plc".start' value="1">
<input type="hidden" name='"web2plc".stop' value="0">

脚本如下所示：

function changePic(color)
 {
     var imageSrc = document.getElementById("pic");
     if(color == "green")
     {
         imageSrc.src="Images/Status01.png";
     }
     else
     {
         imageSrc.src="Images/Status00.png";
     }
 }

我添加了两个按钮只是为了检查它是否正常工作并且确实有效。

<tr>
<td height="55px"><button onclick="changePic('green')">Green</button>
<button onclick="changePic('red')">Red</button>
</td>
</tr>

当我按下绿色/红色按钮时，它会将图像更改为函数 changePic(color) 中定义的相应图像。

我对设计网页非常陌生，并且按照西门子提供的手册来获得基本功能。请让我知道语法是否有任何错误，或者我是否应该以不同的方式执行此操作。

编辑：

图像如下所示：

  1. 状态00.png
  2. 状态01.png
  3. 网页

标签： javascripthtmlplc

解决方案

您在按钮上的点击工作正常。我们只是缺少使您的代码正常工作的图像元素。

你定义了：var imageSrc = document.getElementById("pic");

因此，基于此，我添加了以下 HTML 元素：<img id="pic" src="https://i.imgur.com/wBDM0LM.png" style="vertical-align: middle; margin: 0px; height: 70px;">

请参阅下面的工作示例：

function changePic(color)
{
  var imageSrc = document.getElementById("pic");
  if(color == "green")
  {
    imageSrc.src="https://i.imgur.com/wBDM0LM.png.png";
  }
  else
  {
    imageSrc.src="https://i.imgur.com/ShlKo5C.png";
  }
}
<input type="submit" value="Start" style="height: 45px; width: 150px" id="start" onclick="changePic('green')">
<button onclick="changePic('red')" style="height: 45px; width: 150px">Red</button>
<input type="hidden" name='"web2plc".start' value="1">
<input type="hidden" name='"web2plc".stop' value="0">

<img id="pic" src="https://i.imgur.com/ShlKo5C.png" style="vertical-align: middle; margin: 0px; height: 70px;">

推荐阅读