提交按钮中的OnClick功能不起作用

Question

，因此此网页正在与Siemens 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(颜色(中定义的相应图像。

我是设计网页的新手，并遵循了西门子提供的手册，以使基本功能正常工作。请让我知道语法中是否有任何错误，或者我应该做不同的事情。

编辑：

图像看起来像这样：

1. status00.png
2. status01.png
3. 网页

Answer 1

您在按钮上的单击效果很好。我们只是缺少图像元素来使您的代码工作。

您定义：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;">

Answer 2

尝试这个，

我使用jQuery

但正常工作

$('.button').click(function(){
	if($('#light').hasClass('start'))
  {
    $('#light').removeClass("start");
    $('#light').addClass("stop");
  }
  else if($('#light').hasClass('stop'))
  {
   	$('#light').removeClass("stop");
    $('#light').addClass("start");
  }
	
})
 

#light{
  width : 30px;
  height: 30px;
  border-radius:15px;
}
div.start{
  background-color: green;
}
div.stop{
  background-color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class='button start'>Button</button>
<div class='start' id='light' >
  
</div>