Как сделать кнопки, каждая из которых будет менять цвет фона документа при нажатии?

@Юргъ · Регистрация: 27.09.2014

Author24 — интернет-сервис помощи студентам

Помогите!!! Не могу справиться!!!!
Нужно написать программу с использованием двух языков: html и javascript.
Задание такое:
a. При помещении курсора мыши в любую из клеток(всего 7 штук цвета радуги) второй строки фон документа должен приобретать соответствующий цвет;
b. При уходе курсора из второй строки цвет фона должен восстанавливаться;
c. При нажатии мыши фон клетки, в которой находится курсор, должен стать белым;
d. При отпускании кнопки мыши цвет фона клетки должен восстанавливаться.
e. При нажатии кнопки мыши запускать Alert, выводящий на экран координаты точки, в которой это нажатие произошло;
Прошу помогите! Заранее спасибо!

@Eva Rosalene · 27.09.2014, 19:43

Javascript

NodeList.prototype.__proto__ = Array.prototype;
document.querySelectorAll('.color').forEach(function (i){
    var dataColor = i.getAttribute('data-color')
    i.style.color = dataColor;
    
    i.onmouseover = (function (){
       document.body.style.backgroundColor = dataColor;
       i.style.color = 'black';
    });
    
    i.onmouseout = (function (){
       i.style.color = dataColor;
       i.style.backgroundColor = '';
       document.body.style.backgroundColor = '';
    });
    
    i.onmousedown = (function (e){
       if (e.button != 0) return;
       i.style.backgroundColor = 'white';
    });
    
    i.onmouseup = (function (e){
       if (e.button != 0) return;
       i.style.backgroundColor = '';
       i.style.color = 'white';
       alert( '(' + e.x + '; ' + e.y +')' )
    });
});

HTML5

<div class='container'>
    <div class='color' data-color='red'>Red</div>
    <div class='color' data-color='orange'>Orange</div>
    <div class='color' data-color='yellow'>Yellow</div>
    <div class='color' data-color='green'>Green</div>
    <div class='color' data-color='lightblue'>LightBlue</div>
    <div class='color' data-color='blue'>Blue</div>
    <div class='color' data-color='violet'>Violet</div>
</div>

CSS

.color {
    vertical-align: center;
    padding: 3px;
    cursor: pointer;
    font-weight: bold;
}
 
.container {
    width: 100%;
    height: 100%;
    text-align: center;
}
 
body {
    background-color: black;
}

Демонстрация: http://jsfiddle.net/jmqk3zep/3/embedded/result/

@Юргъ · 27.09.2014, 20:07 **[ТС]**

спасибо но как сделать это в виде кнопок?
А также сформировать в один код?
Чтоб он работал? а то у меня вот так получается:

Javascript

NodeList.prototype.__proto__ = Array.prototype; document.querySelectorAll('.color').forEach(function (i){ var dataColor = i.getAttribute('data-color') i.style.color = dataColor; i.onmouseover = (function (){ document.body.style.backgroundColor = dataColor; i.style.color = 'black'; }); i.onmouseout = (function (){ i.style.color = dataColor; document.body.style.backgroundColor = ''; }); i.onmousedown = (function (e){ if (e.button != 0) return; i.style.backgroundColor = 'white'; }); i.onmouseup = (function (e){ if (e.button != 0) return; i.style.backgroundColor = ''; i.style.color = 'white'; alert( '(' + e.x + '; ' + e.y +')' ) }); });

Код

     Red
    Orange
    Yellow
    Green
    LightBlue
    Blue
    Violet

CSS

1	.color { vertical-align: center; padding: 3px; cursor: pointer; font-weight: bold; } .container { width: 100%; height: 100%; text-align: center; } body { background-color: black; }

Демонстрация: http://jsfiddle.net/jmqk3zep/1/embedded/result/
и больше никак.... не получается как у вас(

@Юргъ · 27.09.2014, 20:10 **[ТС]**

Как сделать кнопки, каждая из которых будет менять цвет фона документа при нажатии?

@Юргъ · 27.09.2014, 20:21 **[ТС]**

Поможете?

@Eva Rosalene · 27.09.2014, 20:35

С кнопками как-то так.

HTML5

<div class='container'>
   <button class='color' data-color='red'>Red</button><br/>
   <button class='color' data-color='orange'>Orange</button><br/>
   <button class='color' data-color='yellow'>Yellow</button><br/>
   <button class='color' data-color='green'>Green</button><br/>
   <button class='color' data-color='lightblue'>LightBlue</button><br/>
   <button class='color' data-color='blue'>Blue</button><br/>
   <button class='color' data-color='violet'>Violet</button>
</div>

CSS

.color {
    vertical-align: center;
    padding: 3px;
    cursor: pointer;
    font-weight: bold;
    width: 100%;
    background-color: black;
}
 
.container {
    width: 100%;
    height: 100%;
    text-align: center;
}
 
body {
    background-color: black;
}

Javascript

NodeList.prototype.__proto__ = Array.prototype;
document.querySelectorAll('.color').forEach(function (i){
    var dataColor = i.getAttribute('data-color')
    i.style.color = dataColor;
    
    i.onmouseover = (function (){
       document.body.style.backgroundColor = dataColor;
       i.style.backgroundColor = dataColor;
       i.style.color = 'black';
    });
    
    i.onmouseout = (function (){
       i.style.color = dataColor;
       i.style.backgroundColor = '';
       document.body.style.backgroundColor = '';
    });
    
    i.onmousedown = (function (e){
       if (e.button != 0) return;
       i.style.backgroundColor = 'white';
    });
    
    i.onmouseup = (function (e){
       if (e.button != 0) return;
       i.style.backgroundColor = '';
       i.style.color = 'white';
       alert( '(' + e.x + '; ' + e.y +')' )
    });
});

http://jsfiddle.net/jmqk3zep/5/embedded/result/

@BANO · 27.09.2014, 20:40

смотри функция приведённая FraidZZ универсальна ты просто class у кнопок поменяй на color и должно работать или в вашем случае tr или td уже не помню но во всяком случае на клетку

@Eva Rosalene · 27.09.2014, 20:43

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

универсальна ты просто class у кнопок поменяй на color и должно работать или в вашем случае tr или td уже не помню но во всяком случае на клетку

Именно так.

@Юргъ · 27.09.2014, 20:47 **[ТС]**

не получается до сих пор объединить в один код все это( на фот будет результат увидите сейчас....

@Юргъ · 27.09.2014, 20:48 **[ТС]**

Вот что у меня получилось:
уже не знаю что делать(((

@Юргъ · 27.09.2014, 20:50 **[ТС]**

посмотрите на фотках что должно получится и что у меня получилось..

@BANO · 27.09.2014, 21:00

ну понятно код страницы скинь ты css записал в текст старницы

Добавлено через 1 минуту
я тебе больше скажу ты просто всё скопировал в файл без форматирования

@Eva Rosalene · 27.09.2014, 21:00

Компонуйте код правильно.

PHP/HTML

<html>
   <head>
      <title>Rainbow Color Buttons</title>
      <style>
         .color {
            vertical-align: center;
            padding: 3px;
            cursor: pointer;
            font-weight: bold;
            width: 100%;
            background-color: black;
         }
 
         .container {
            width: 100%;
            height: 100%;
            text-align: center;
         }
 
         body {
            background-color: black;
         }
      </style>
   </head>
   <body>
      <div class='container'>
         <button class='color' data-color='red'>Red</button><br/>
         <button class='color' data-color='orange'>Orange</button><br/>
         <button class='color' data-color='yellow'>Yellow</button><br/>
         <button class='color' data-color='green'>Green</button><br/>
         <button class='color' data-color='lightblue'>LightBlue</button><br/>
         <button class='color' data-color='blue'>Blue</button><br/>
         <button class='color' data-color='violet'>Violet</button>
      </div>
      <script>
         NodeList.prototype.__proto__ = Array.prototype;
         document.querySelectorAll('.color').forEach(function (i){
            var dataColor = i.getAttribute('data-color')
            i.style.color = dataColor;
    
            i.onmouseover = (function (){
               document.body.style.backgroundColor = dataColor;
               i.style.backgroundColor = dataColor;
               i.style.color = 'black';
            });
    
            i.onmouseout = (function (){
               i.style.color = dataColor;
               i.style.backgroundColor = '';
               document.body.style.backgroundColor = '';
            });
    
            i.onmousedown = (function (e){
               if (e.button != 0) return;
               i.style.backgroundColor = 'white';
            });
    
            i.onmouseup = (function (e){
               if (e.button != 0) return;
               i.style.backgroundColor = '';
               i.style.color = 'white';
               alert( '(' + e.x + '; ' + e.y +')' )
            });
         });
      </script>
   </body>
</html>

@BANO · 27.09.2014, 21:01

надо js в теги <script></script> а css в <style></style>

@Юргъ · 27.09.2014, 21:01 **[ТС]**

все понял! спасибо!!!

@BANO · 27.09.2014, 21:02

у FraidZZ, правелно показанно я всегда медленно печатую

Добавлено через 20 секунд
☺☺☺

@Юргъ 1 / 1 / 0 Регистрация: 27.09.2014 Сообщений: 10
	27.09.2014, 20:50 [ТС]	11
	посмотрите на фотках что должно получится и что у меня получилось.. 0

@BANO Ренегат 1740 / 1085 / 386 Регистрация: 06.08.2014 Сообщений: 5,203 Записей в блоге: 1
	27.09.2014, 21:00	12
	ну понятно код страницы скинь ты css записал в текст старницы Добавлено через 1 минуту я тебе больше скажу ты просто всё скопировал в файл без форматирования 2

@Юргъ 1 / 1 / 0 Регистрация: 27.09.2014 Сообщений: 10
	27.09.2014, 21:01 [ТС]	15
	все понял! спасибо!!! 0

@BANO Ренегат 1740 / 1085 / 386 Регистрация: 06.08.2014 Сообщений: 5,203 Записей в блоге: 1
	27.09.2014, 21:02	16
	у FraidZZ, правелно показанно я всегда медленно печатую Добавлено через 20 секунд ☺☺☺ 0

@Юргъ 1 / 1 / 0 Регистрация: 27.09.2014 Сообщений: 10
	27.09.2014, 20:10 [ТС]	4
	1

@Юргъ 1 / 1 / 0 Регистрация: 27.09.2014 Сообщений: 10
	27.09.2014, 20:21 [ТС]	5
	Поможете? 0

@BANO Ренегат 1740 / 1085 / 386 Регистрация: 06.08.2014 Сообщений: 5,203 Записей в блоге: 1
	27.09.2014, 20:40	7
	смотри функция приведённая FraidZZ универсальна ты просто class у кнопок поменяй на color и должно работать или в вашем случае tr или td уже не помню но во всяком случае на клетку 1

@Eva Rosalene Модератор 5197 / 2079 / 406 Регистрация: 06.01.2013 Сообщений: 4,793
	27.09.2014, 20:43	8
	Сообщение от BANO универсальна ты просто class у кнопок поменяй на color и должно работать или в вашем случае tr или td уже не помню но во всяком случае на клетку Именно так. 0

@Юргъ 1 / 1 / 0 Регистрация: 27.09.2014 Сообщений: 10
	27.09.2014, 20:47 [ТС]	9
	не получается до сих пор объединить в один код все это( на фот будет результат увидите сейчас.... 0

@Юргъ 1 / 1 / 0 Регистрация: 27.09.2014 Сообщений: 10
	27.09.2014, 20:48 [ТС]	10
	Вот что у меня получилось: уже не знаю что делать((( Миниатюры 0

@BANO Ренегат 1740 / 1085 / 386 Регистрация: 06.08.2014 Сообщений: 5,203 Записей в блоге: 1
	27.09.2014, 21:01	14
	надо js в теги <script></script> а css в <style></style> 2