Показать сообщение отдельно
  #1 (permalink)  
Старый 23.10.2024, 19:26
Новичок на форуме
Отправить личное сообщение для robotehnika18 Посмотреть профиль Найти все сообщения от robotehnika18
 
Регистрация: 23.10.2024
Сообщений: 2

Помогите оптимизировать и доделать скрипт
Здравствуйте. Имеется такой рабочий код:

<div style="float:left;padding:1px;margin:10px;width:160px;height:257px;background-color:gray;">

<div id="b1" style="float:left;margin:1px;width:30px;height:30px;background-color:silver;">
<input type="button" style="width:30px;height:30px;background-color:rgba(255, 255, 255, 0);" onclick="reverse1()">
</div>
<div id="b2" style="float:left;margin:1px;width:30px;height:30px;background-color:silver;">
<input type="button" style="width:30px;height:30px;background-color:rgba(255, 255, 255, 0);" onclick="reverse2()">
</div>
<div id="b3" style="float:left;margin:1px;width:30px;height:30px;background-color:silver;">
<input type="button" style="width:30px;height:30px;background-color:rgba(255, 255, 255, 0);" onclick="reverse3()">
</div>
<div id="b4" style="float:left;margin:1px;width:30px;height:30px;background-color:silver;">
<input type="button" style="width:30px;height:30px;background-color:rgba(255, 255, 255, 0);" onclick="reverse4()">
</div>
<div id="b5" style="float:left;margin:1px;width:30px;height:30px;background-color:silver;">
<input type="button" style="width:30px;height:30px;background-color:rgba(255, 255, 255, 0);" onclick="reverse5()">
</div>
</div>

<div style="float:left;padding:1px;margin-left:20px;width:300px;height:256px;">
<br>
<span id="t1">0</span><span id="t2">0</span><span id="t3">0</span><span id="t4">0</span><span id="t5">0</span><br>
</div>


<script type="text/javascript">

function reverse1() {

var e = document.getElementById("t1");
var b = document.getElementById("b1");

var txt = e.textContent || e.innerText;
var box = document.getElementById('b1').style.backgroundColor;

var txt2 = '0';
  if(txt != txt2){var newtxt = '0';}
  else{var newtxt = '1';}
document.getElementById('t1').innerHTML = newtxt;

var box2 = 'forestgreen';
  if(box != box2){var newbox = 'forestgreen';}
  else{var newbox = 'silver';}
document.getElementById('b1').style.backgroundColor = newbox;

};

function reverse2() {

var e = document.getElementById("t2");
var b = document.getElementById("b2");

var txt = e.textContent || e.innerText;
var box = document.getElementById('b2').style.backgroundColor;

var txt2 = '0';
  if(txt != txt2){var newtxt = '0';}
  else{var newtxt = '1';}
document.getElementById('t2').innerHTML = newtxt;

var box2 = 'forestgreen';
  if(box != box2){var newbox = 'forestgreen';}
  else{var newbox = 'silver';}
document.getElementById('b2').style.backgroundColor = newbox;

};

function reverse3() {

var e = document.getElementById("t3");
var b = document.getElementById("b3");

var txt = e.textContent || e.innerText;
var box = document.getElementById('b3').style.backgroundColor;

var txt2 = '0';
  if(txt != txt2){var newtxt = '0';}
  else{var newtxt = '1';}
document.getElementById('t3').innerHTML = newtxt;

var box2 = 'forestgreen';
  if(box != box2){var newbox = 'forestgreen';}
  else{var newbox = 'silver';}
document.getElementById('b3').style.backgroundColor = newbox;

};

function reverse4() {

var e = document.getElementById("t4");
var b = document.getElementById("b4");

var txt = e.textContent || e.innerText;
var box = document.getElementById('b4').style.backgroundColor;

var txt2 = '0';
  if(txt != txt2){var newtxt = '0';}
  else{var newtxt = '1';}
document.getElementById('t4').innerHTML = newtxt;

var box2 = 'forestgreen';
  if(box != box2){var newbox = 'forestgreen';}
  else{var newbox = 'silver';}
document.getElementById('b4').style.backgroundColor = newbox;

};

function reverse5() {

var e = document.getElementById("t5");
var b = document.getElementById("b5");

var txt = e.textContent || e.innerText;
var box = document.getElementById('b5').style.backgroundColor;

var txt2 = '0';
  if(txt != txt2){var newtxt = '0';}
  else{var newtxt = '1';}
document.getElementById('t5').innerHTML = newtxt;

var box2 = 'forestgreen';
  if(box != box2){var newbox = 'forestgreen';}
  else{var newbox = 'silver';}
document.getElementById('b5').style.backgroundColor = newbox;

};
</script>


Вопрос - как можно через цикл for упростить работу скрипта (если кнопок будет больше и на каждую писать свою функцию - будет большая программа)

И второй вопрос, как сделать кнопку сброса всех значений и нажатых кнопок в исходное состояние?

Спасибо. JS знаю плохо, изучаю для своих сайтов по форумам
Ответить с цитированием