因此,此网页正在与西门子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(colour)中定义的相应图像。
我对设计网页非常陌生,并且已遵循Siemens提供的手册来使基本功能正常工作。请让我知道语法是否有错误或应该以其他方式进行更改。
编辑:
图像如下:
答案 0 :(得分:0)
您在按钮上的单击正常。我们只是缺少image元素来使您的代码正常工作。
您定义了: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;">
答案 1 :(得分:0)
尝试一下
我用过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>