Функция нажатия на кнопку отправки не работает - PullRequest
Новая
       28

Функция нажатия на кнопку отправки не работает

0 голосов
/ 28 июня 2019

Итак, эта веб-страница взаимодействует с ПЛК Siemens.Есть три кнопки: одна для запуска процесса;один, чтобы остановиться;и один, чтобы сбросить все это.Все работает как положено, но функция 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).

Я очень новичок в разработке веб-страниц и имеюследуя инструкции, предоставленной Siemens, чтобы основные функции работали.Пожалуйста, дайте мне знать, если есть какая-то ошибка в синтаксисе или я должен делать это по-другому.

Редактировать:

Изображения выглядят так:

  1. Status00.png
  2. Status01.png
  3. Веб-страница

Ответы [ 2 ]

0 голосов
/ 28 июня 2019

Попробуйте,

Я использовал 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>
0 голосов
/ 28 июня 2019

Ваше нажатие на кнопку работает нормально.Нам просто не хватает элемента изображения, чтобы ваш код работал.

Вы определили: 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;">
...