提交按钮中的 Onclick 功能不起作用答案

【问题标题】：Onclick function in a submit button is not working提交按钮中的 Onclick 功能不起作用
【发布时间】：2023-03-22 19:26:01
【问题描述】：

所以这个网页正在与西门子 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) 中定义的相应图像。

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

编辑：

图像看起来像这样：

【问题讨论】：

将类型改为按钮而不是提交
提交和按钮有什么区别？
您的代码按原样工作，只是您的服务器发送一个新页面（重新加载当前页面）作为对表单提交的响应。
对我来说工作得很好:(
为什么你需要提交按钮，如果你只在前端使用操作

标签： javascript html plc

【解决方案1】：

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

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

【讨论】：

我还在编辑部分添加了图片以供参考。请看一看。
我添加了一些您的信息以使小提琴相应地工作。 @斯通纳
所以默认会显示Status00.png图像（即红色的），当点击开始按钮时，它将变为Status01.png。
您定义了绿色图像来代表status00.png，所以这就是我所做的。或者您希望看到它反转而不是它现在的工作方式？我把它颠倒了，所以你可以看到最终结果@Stoner

【解决方案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>

【讨论】：