Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 18.11.2016, 14:18
Новичок на форуме
Отправить личное сообщение для TANDEROID Посмотреть профиль Найти все сообщения от TANDEROID
 
Регистрация: 18.11.2016
Сообщений: 5

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

<!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>

Последний раз редактировалось TANDEROID, 18.11.2016 в 14:23.
Ответить с цитированием
  #2 (permalink)  
Старый 18.11.2016, 14:25
Профессор
Отправить личное сообщение для Dilettante_Pro Посмотреть профиль Найти все сообщения от Dilettante_Pro
 
Регистрация: 27.11.2015
Сообщений: 2,899

<!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>
Ответить с цитированием
  #3 (permalink)  
Старый 18.11.2016, 14:28
Профессор
Отправить личное сообщение для Dilettante_Pro Посмотреть профиль Найти все сообщения от Dilettante_Pro
 
Регистрация: 27.11.2015
Сообщений: 2,899

А можно немного упростить
<!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>
Ответить с цитированием
  #4 (permalink)  
Старый 18.11.2016, 15:07
Новичок на форуме
Отправить личное сообщение для TANDEROID Посмотреть профиль Найти все сообщения от TANDEROID
 
Регистрация: 18.11.2016
Сообщений: 5

Спасибо огромное)))
Ответить с цитированием
  #5 (permalink)  
Старый 18.11.2016, 15:28
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 31,157

Сообщение от 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>
Ответить с цитированием
  #6 (permalink)  
Старый 18.11.2016, 15:55
Профессор
Отправить личное сообщение для Dilettante_Pro Посмотреть профиль Найти все сообщения от Dilettante_Pro
 
Регистрация: 27.11.2015
Сообщений: 2,899

рони,
Я не стал сразу так далеко шагать Работу по складАм тоже полезно знать
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Скрипт не работает в Opera в интернете, но работает на локальном ПК lsti Opera, Safari и др. 4 29.12.2013 06:48
Не работает скрипт калькулятора в FF 4.0 YaVolodya Firefox/Mozilla 2 01.11.2013 10:04
В Firefox не работает скрипт в отличии от Opera, Chrome, IE yanagas Javascript под браузер 2 06.08.2013 01:32
Скрипт не выполняется в IE. В остальных браузерах - все работает. tapak123 Internet Explorer 2 20.02.2013 22:06
скрипт работает только в IE, а в остальных браузерах нет. melodicman Firefox/Mozilla 0 23.06.2010 15:18