Форум

TANDEROID · #1 (**permalink**) 18.11.2016, 14:18

Скрипт должен работать примерно так:
При нажатии на конкретный блок, он меняет
свой стиль на противоположной и при
повторном нажатии возвращаться.

<!DOCTYPE html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<style type="text/css">
		.non_used{
		 background-color:red;
		 text-align: center;
		 width: 300px;
		 font-size:100px;
		}
		.used{
		 background-color: yellow;
		 text-align: center;
		 width: 300px;
		 font-size:100px;
		 color: red;
		}
	</style>
	<script type="text/javascript">
		var i = 0;
		var block = document.getElementsByTagName("div");
		function test(i){
		 
		 
		 
		 
		 if(block[i].getElementsByClassName("non_used")){
		 block[i].classList.remove("non_used");
		 block[i].classList.add("used");
		 }else{
		 block[i].classList.remove("used");
		 block[i].classList.add("non_used");
		 };
		}
	</script>
</head>
<body>

<div class="non_used" onclick="test(0)">000</div>
<div class="non_used" onclick="test(1)">111</div>
<div class="non_used" onclick="test(2)">222</div>
<div class="used" onclick="test(3)">333</div>

</body>
</html>

Dilettante_Pro · #2 (**permalink**) 18.11.2016, 14:25

<!DOCTYPE html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<style type="text/css">
		.non_used{
		 background-color:red;
		 text-align: center;
		 width: 300px;
		 font-size:100px;
		}
		.used{
		 background-color: yellow;
		 text-align: center;
		 width: 300px;
		 font-size:100px;
		 color: red;
		}
	</style>
	<script type="text/javascript">
		var i = 0;
		var block = document.getElementsByTagName("div");
		function test(i){
		 
		 
		 
		 
		 if(block[i].classList.contains("non_used")){
		 block[i].classList.remove("non_used");
		 block[i].classList.add("used");
		 }else{
		 block[i].classList.remove("used");
		 block[i].classList.add("non_used");
		 };
		}
	</script>
</head>



<div class="non_used" onclick="test(0)">000</div>
<div class="non_used" onclick="test(1)">111</div>
<div class="non_used" onclick="test(2)">222</div>
<div class="used" onclick="test(3)">333</div>

Dilettante_Pro · #3 (**permalink**) 18.11.2016, 14:28

А можно немного упростить

<!DOCTYPE html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<style type="text/css">
		.non_used{
		 background-color:red;
		 text-align: center;
		 width: 300px;
		 font-size:100px;
		}
		.used{
		 background-color: yellow;
		 text-align: center;
		 width: 300px;
		 font-size:100px;
		 color: red;
		}
	</style>
	<script type="text/javascript">

		function test(elem){
		 if(elem.classList.contains("non_used")){
		 elem.classList.remove("non_used");
		 elem.classList.add("used");
		 }else{
		 elem.classList.remove("used");
		 elem.classList.add("non_used");
		 };
		}
	</script>
</head>
<div class="non_used" onclick="test(this)">000</div>
<div class="non_used" onclick="test(this)">111</div>
<div class="non_used" onclick="test(this)">222</div>
<div class="used" onclick="test(this)">333</div>

TANDEROID · #4 (**permalink**) 18.11.2016, 15:07

Спасибо огромное)))

рони · #5 (**permalink**) 18.11.2016, 15:28

Сообщение от Dilettante_Pro

А можно немного упростить

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .non_used{
     background-color:red;
     text-align: center;
     width: 300px;
     font-size:100px;
    }
    .used{
     background-color: yellow;
     color: red;
    }
  </style>

  <script>
    function test(elem){
     elem.classList.toggle("used");
    }
  </script>
</head>

<body>
<div class="non_used" onclick="test(this)">000</div>
<div class="non_used" onclick="test(this)">111</div>
<div class="non_used" onclick="test(this)">222</div>
<div class="non_used used" onclick="test(this)">333</div>

</body>
</html>

Dilettante_Pro · #6 (**permalink**) 18.11.2016, 15:55

рони,
Я не стал сразу так далеко шагать

Работу по складАм тоже полезно знать

Форум

Справочник

Discord чат

Курсы javascript