Форум

Zyuzka · #1 (**permalink**) 05.02.2015, 11:58

Доброе время суток форумчане! Я полный нуб в js

. Хочу попросить у вас подсказки. Есть код:

<body onload="test()">

	<div id="a0">1</div>
	<div id="a1">2</div>
	<div id="a2">3</div>
	<div id="a3">4</div>
	<div id="a4">5</div>
	<div id="a5">6</div>
</body>

function test(){
	var divs;
    for(var j = 0; j < 6; j++) {
        divs= document.getElementById('a' + j);
		divs.onclick = function () {
				document.getElementById(this.id).style.backgroundColor = "blue";
                alert("ID элемента" + " " + "'" + this.id + "'");

Проблема в том, что бы по нажатию на DIV предыдущий тоже менял bgColor. Буду благодарен за любые советы и подсказки

рони · #2 (**permalink**) 05.02.2015, 12:27

Zyuzka,

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <script>
     function test(){
	var divs,  old;
    for(var j = 0; j < 6; j++) {
        divs= document.getElementById('a' + j);
		divs.onclick = function () {
                old && (old.style.backgroundColor='')
				this.style.backgroundColor = "blue";
                old = this
               }}}

  </script>
</head>

<body onload="test()">

	<div id="a0">1</div>
	<div id="a1">2</div>
	<div id="a2">3</div>
	<div id="a3">4</div>
	<div id="a4">5</div>
	<div id="a5">6</div>
</body>


</html>

Zyuzka · #3 (**permalink**) 05.02.2015, 12:33

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

Zyuzka,

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <script>
     function test(){
	var divs,  old;
    for(var j = 0; j < 6; j++) {
        divs= document.getElementById('a' + j);
		divs.onclick = function () {
                old && (old.style.backgroundColor='')
				this.style.backgroundColor = "blue";
                old = this
               }}}

  </script>
</head>

<body onload="test()">

	<div id="a0">1</div>
	<div id="a1">2</div>
	<div id="a2">3</div>
	<div id="a3">4</div>
	<div id="a4">5</div>
	<div id="a5">6</div>
</body>


</html>

Почти=) Но нужно что бы по нажатию на "а3" цвет "blue" применялся и на "a2","a1","a0"

рони · #4 (**permalink**) 05.02.2015, 12:41

Zyuzka,

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <script>
 function test() {
         var divs;
         for (var j = 0; j < 6; j++) {
             divs = document.getElementById('a' + j);
             divs.onclick = function() {
                 var color = "blue"
                 for (var j = 0; j < 6; j++) {
                     divs = document.getElementById('a' + j);
                     divs.style.backgroundColor = color;
                     if (divs == this) color = '';
                 }
             }
         }
     }
  </script>
</head>

<body onload="test()">

	<div id="a0">1</div>
	<div id="a1">2</div>
	<div id="a2">3</div>
	<div id="a3">4</div>
	<div id="a4">5</div>
	<div id="a5">6</div>
</body>


</html>

Zyuzka · #5 (**permalink**) 05.02.2015, 12:45

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

Zyuzka,

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <script>
 function test() {
         var divs;
         for (var j = 0; j < 6; j++) {
             divs = document.getElementById('a' + j);
             divs.onclick = function() {
                 var color = "blue"
                 for (var j = 0; j < 6; j++) {
                     divs = document.getElementById('a' + j);
                     divs.style.backgroundColor = color;
                     if (divs == this) color = '';
                 }
             }
         }
     }
  </script>
</head>

<body onload="test()">

	<div id="a0">1</div>
	<div id="a1">2</div>
	<div id="a2">3</div>
	<div id="a3">4</div>
	<div id="a4">5</div>
	<div id="a5">6</div>
</body>


</html>

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

Zyuzka · #6 (**permalink**) 05.02.2015, 15:05

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

Zyuzka,

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <script>
 function test() {
         var divs;
         for (var j = 0; j < 6; j++) {
             divs = document.getElementById('a' + j);
             divs.onclick = function() {
                 var color = "blue"
                 for (var j = 0; j < 6; j++) {
                     divs = document.getElementById('a' + j);
                     divs.style.backgroundColor = color;
                     if (divs == this) color = '';
                 }
             }
         }
     }
  </script>
</head>

<body onload="test()">

	<div id="a0">1</div>
	<div id="a1">2</div>
	<div id="a2">3</div>
	<div id="a3">4</div>
	<div id="a4">5</div>
	<div id="a5">6</div>
</body>


</html>

Возникла новая проблема

. Как прикрепить

background: linear-gradient(to right, blue 50%, white 50%);

к элементу по которому кликнули?

рони · #7 (**permalink**) 05.02.2015, 15:36

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

к элементу по которому кликнули?

к элементу или ко всем что выше?

рони · #8 (**permalink**) 05.02.2015, 15:51

Zyuzka,

<!DOCTYPE HTML>
<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <script>
 function test() {
         var divs;
         for (var j = 0; j < 6; j++) {
             divs = document.getElementById('a' + j);
             divs.onclick = function() {
                 var color = "linear-gradient(to right, blue, white)"
                 for (var j = 0; j < 6; j++) {
                     divs = document.getElementById('a' + j);
                     divs.style.backgroundImage = color;
                     if (divs == this) color = '';
                 }
             }
         }
     }
  </script>
</head>
<body onload="test()">
	<div id="a0">1</div>
	<div id="a1">2</div>
	<div id="a2">3</div>
	<div id="a3">4</div>
	<div id="a4">5</div>
	<div id="a5">6</div>
</body>
</html>

рони · #9 (**permalink**) 05.02.2015, 15:55

Zyuzka,

<!DOCTYPE HTML>
<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <script>
 function test() {
         var divs;
         for (var j = 0; j < 6; j++) {
             divs = document.getElementById('a' + j);
             divs.onclick = function() {
                 var color = "linear-gradient(to right, blue, blue)"
                 for (var j = 0; j < 6; j++) {
                     divs = document.getElementById('a' + j);
                     divs.style.backgroundImage = divs == this ? "linear-gradient(to right, blue, white)" : color;
                     if (divs == this) color = '';
                 }
             }
         }
     }
  </script>
</head>
<body onload="test()">
	<div id="a0">1</div>
	<div id="a1">2</div>
	<div id="a2">3</div>
	<div id="a3">4</div>
	<div id="a4">5</div>
	<div id="a5">6</div>
</body>
</html>

Zyuzka · #10 (**permalink**) 05.02.2015, 17:47

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

Zyuzka,

<!DOCTYPE HTML>
<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <script>
 function test() {
         var divs;
         for (var j = 0; j < 6; j++) {
             divs = document.getElementById('a' + j);
             divs.onclick = function() {
                 var color = "linear-gradient(to right, blue, blue)"
                 for (var j = 0; j < 6; j++) {
                     divs = document.getElementById('a' + j);
                     divs.style.backgroundImage = divs == this ? "linear-gradient(to right, blue, white)" : color;
                     if (divs == this) color = '';
                 }
             }
         }
     }
  </script>
</head>
<body onload="test()">
	<div id="a0">1</div>
	<div id="a1">2</div>
	<div id="a2">3</div>
	<div id="a3">4</div>
	<div id="a4">5</div>
	<div id="a5">6</div>
</body>
</html>

Да это то что надо! Спасибо большое ещё раз.
Осталось понять строку

divs.style.backgroundImage = divs == this ? "linear-gradient(to right, blue, white)" : color;

Форум

Справочник

Discord чат

Курсы javascript