Форум программистов, компьютерный форум, киберфорум
JavaScript: ReactJS
Форум программистов и сисадминов Киберфорум > Форум вебмастеров > JavaScript > JavaScript: Фреймворки > JavaScript: ReactJS
Войти
Регистрация
Восстановить пароль
Карта форума Темы раздела Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.88/8: Рейтинг темы: голосов - 8, средняя оценка - 4.88
0 / 0 / 0
Регистрация: 24.11.2019
Сообщений: 36
1

Изменение backgroundcolor DIVa

24.11.2019, 17:36. Показов 1649. Ответов 8
Метки нет (Все метки)
Author24 — интернет-сервис помощи студентам
Случайному DIVу, выбранному с помощью math.random по нажатию button присвоен синий цвет. Как в этом же случайном DIVе по клику мышки изменить цвет на другой (скажем,-зеленый)?
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54

import React, { Component } from 'react';
import'./game.css'
 
export default class Game extends Component {
 
    render() {
       const duel = ['duel1', 'duel2', 'duel3', 'duel4', 'duel5', 'duel6', 'duel7', 'duel8', 'duel9', 'duel10', 'duel11', 'duel12', 'duel13', 'duel14', 'duel15', 'duel16', 'duel17', 'duel18', 'duel19', 'duel20', 'duel21', 'duel22', 'duel23', 'duel24', 'duel25'];
       const numRandom = () => {
       let randomNumber = duel[Math.round(Math.random() * 24 + 1)];
       let rancell = document.getElementById(randomNumber).style.background = 'blue';
       };
 
        return (
            <div className={'game'}>
                     <div>
                        <button onClick={numRandom}>Play</button>
                    </div>
                </div>
 
                <div>
                    <div className='cell' id='duel1'></div>
                    <div className='cell' id='duel2'></div>
                    <div className='cell' id='duel3'></div>
                    <div className='cell' id='duel4'></div>
                    <div className='cell' id='duel5'></div>
 
                    <div className='cell' id='duel6'></div>
                    <div className='cell' id='duel7'></div>
                    <div className='cell' id='duel8'></div>
                    <div className='cell' id='duel9'></div>
                    <div className='cell' id='duel10'></div>
 
                    <div className='cell' id='duel11'></div>
                    <div className='cell' id='duel12'></div>
                    <div className='cell' id='duel13'></div>
                    <div className='cell' id='duel14'></div>
                    <div className='cell' id='duel15'></div>
 
                    <div className='cell' id='duel16'></div>
                    <div className='cell' id='duel17'></div>
                    <div className='cell' id='duel18'></div>
                    <div className='cell' id='duel19'></div>
                    <div className='cell' id='duel20'></div>
 
                    <div className='cell' id='duel21'></div>
                    <div className='cell' id='duel22'></div>
                    <div className='cell' id='duel23'></div>
                    <div className='cell' id='duel24'></div>
                    <div className='cell' id='duel25'></div>
                </div>
            </div>
        );
    };
}
0
Лучшие ответы (1)
Сообщение: #14028300
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
 24.11.2019, 17:36
Ответы с готовыми решениями:

Изменение углов diva
Добрый день! Подскажите, пожалуйста, как делаются такие углы у Divа? Есть идея вставлять...

Наложение Diva поверх другого diva
Помогите уже час думаю как сделать не получается.

Свойство backgroundColor
Здравствуйте! Вот такой вопрос. Функция генерирует цвета (т.е. числовые значения трех переменных)....

Change BackgroundColor по ID div
Добрый день! Есть код &lt;header&gt; &lt;div id=&quot;h0&quot;&gt;10&lt;/div&gt; &lt;div id=&quot;h1&quot;&gt;11&lt;/div&gt; ...

8
61 / 44 / 16
Регистрация: 09.02.2019
Сообщений: 149
24.11.2019, 19:12 2
Javascript
1
2
3
4
5
6
7

let randomNumber = duel[Math.round(Math.random() * 24 + 1)];
       let rancell = document.getElementById(randomNumber).style.background = 'blue';
   
rancell .onclick = (e)=>{ 
  e.target.style.color = "red"
}
    };
0
0 / 0 / 0
Регистрация: 24.11.2019
Сообщений: 36
24.11.2019, 20:06  [ТС] 3
Спасибо, но не работает.
Сообщения из консоли: 2 ошибки:
Первая ошибка: Uncaught TypeError: Cannot create property 'onclick' on string 'blue'
at numRandom (game.js:12)
at HTMLUnknownElement.callCallback (react-dom.development.js:363)
at Object.invokeGuardedCallbackDev (react-dom.development.js:412)
at invokeGuardedCallback (react-dom.development.js:465)
at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:480)
at executeDispatch (react-dom.development.js:613)
at executeDispatchesInOrder (react-dom.development.js:638)
at executeDispatchesAndRelease (react-dom.development.js:743)
at executeDispatchesAndReleaseTopLevel (react-dom.development.js:752)
at forEachAccumulated (react-dom.development.js:724)
at runEventsInBatch (react-dom.development.js:769)
at runExtractedPluginEventsInBatch (react-dom.development.js:915)
at handleTopLevel (react-dom.development.js:5866)
at batchedEventUpdates$1 (react-dom.development.js:24311)
at batchedEventUpdates (react-dom.development.js:1460)
at dispatchEventForPluginEventSystem (react-dom.development.js:5966)
at attemptToDispatchEvent (react-dom.development.js:6083)
at dispatchEvent (react-dom.development.js:5986)
at unstable_runWithPriority (scheduler.development.js:818)
at runWithPriority$2 (react-dom.development.js:12259)
at discreteUpdates$1 (react-dom.development.js:24328)
at discreteUpdates (react-dom.development.js:1485)
at dispatchDiscreteEvent (react-dom.development.js:5949)
numRandom @ game.js:12
callCallback @ react-dom.development.js:363
invokeGuardedCallbackDev @ react-dom.development.js:412
invokeGuardedCallback @ react-dom.development.js:465
invokeGuardedCallbackAndCatchFirstError @ react-dom.development.js:480
executeDispatch @ react-dom.development.js:613
executeDispatchesInOrder @ react-dom.development.js:638
executeDispatchesAndRelease @ react-dom.development.js:743
executeDispatchesAndReleaseTopLevel @ react-dom.development.js:752
forEachAccumulated @ react-dom.development.js:724
runEventsInBatch @ react-dom.development.js:769
runExtractedPluginEventsInBatch @ react-dom.development.js:915
handleTopLevel @ react-dom.development.js:5866
batchedEventUpdates$1 @ react-dom.development.js:24311
batchedEventUpdates @ react-dom.development.js:1460
dispatchEventForPluginEventSystem @ react-dom.development.js:5966
attemptToDispatchEvent @ react-dom.development.js:6083
dispatchEvent @ react-dom.development.js:5986
unstable_runWithPriority @ scheduler.development.js:818
runWithPriority$2 @ react-dom.development.js:12259
discreteUpdates$1 @ react-dom.development.js:24328
discreteUpdates @ react-dom.development.js:1485
dispatchDiscreteEvent @ react-dom.development.js:5949
2-я ошибка:Uncaught TypeError: Cannot create property 'onclick' on string 'blue'
at numRandom (game.js:12)
at HTMLUnknownElement.callCallback (react-dom.development.js:363)
at Object.invokeGuardedCallbackDev (react-dom.development.js:412)
at invokeGuardedCallback (react-dom.development.js:465)
at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:480)
at executeDispatch (react-dom.development.js:613)
at executeDispatchesInOrder (react-dom.development.js:638)
at executeDispatchesAndRelease (react-dom.development.js:743)
at executeDispatchesAndReleaseTopLevel (react-dom.development.js:752)
at forEachAccumulated (react-dom.development.js:724)
at runEventsInBatch (react-dom.development.js:769)
at runExtractedPluginEventsInBatch (react-dom.development.js:915)
at handleTopLevel (react-dom.development.js:5866)
at batchedEventUpdates$1 (react-dom.development.js:24311)
at batchedEventUpdates (react-dom.development.js:1460)
at dispatchEventForPluginEventSystem (react-dom.development.js:5966)
at attemptToDispatchEvent (react-dom.development.js:6083)
at dispatchEvent (react-dom.development.js:5986)
at unstable_runWithPriority (scheduler.development.js:818)
at runWithPriority$2 (react-dom.development.js:12259)
at discreteUpdates$1 (react-dom.development.js:24328)
at discreteUpdates (react-dom.development.js:1485)
at dispatchDiscreteEvent (react-dom.development.js:5949)
0
61 / 44 / 16
Регистрация: 09.02.2019
Сообщений: 149
24.11.2019, 22:08 4
пробел был перед .onclick случайно поставил ... нужно без него записать

Добавлено через 11 минут
Javascript
1
2
3
4
5
6
7

let randomNumber = duel[Math.round(Math.random() * 24 + 1)];
       let rancell = document.getElementById(randomNumber);
       rancell.style.background = 'blue';   
       rancell.onclick = (e)=>{ 
  e.target.style.color = "red"
}
    };
0
0 / 0 / 0
Регистрация: 24.11.2019
Сообщений: 36
24.11.2019, 22:17  [ТС] 5
Цитата Сообщение от Yura007 Посмотреть сообщение
пробел был перед .onclick случайно поставил ... нужно без него записать
Пробел я удалял.

Добавлено через 6 минут
Цитата Сообщение от Yura007 Посмотреть сообщение
let randomNumber = duel[Math.round(Math.random() * 24 + 1)];
       let rancell = document.getElementById(randomNumber);
       rancell.style.background = 'blue';  
       rancell.onclick = (e)=>{
  e.target.style.color = "red"
}
    };
Цитата Сообщение от Yura007 Посмотреть сообщение
let randomNumber = duel[Math.round(Math.random() * 24 + 1)];
       let rancell = document.getElementById(randomNumber);
       rancell.style.background = 'blue';  
       rancell.onclick = (e)=>{
  e.target.style.color = "red"
}
    };
Случайному div присваивается синий цвет, но никакой реакции по изменению на красный при клике на этот div
0
61 / 44 / 16
Регистрация: 09.02.2019
Сообщений: 149
25.11.2019, 00:00 6
тогда используйте React.createRef()

Добавлено через 15 минут
вообще то DIV и не изменит цвет на красный .Изменит цвет на красный текст дива , а для изменения цвета самого дива нужно будет
Javascript
1

e.target.style.background = "red";
Добавлено через 2 минуты
Вообще в reacte вот так делать не очень красиво.
0
1786 / 1036 / 445
Регистрация: 12.05.2016
Сообщений: 2,550
25.11.2019, 05:56 7
Лучший ответ Сообщение было отмечено Евгений_1827 как решение

Решение

Евгений_1827, идея такая
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

function updateObjectInArray(array, newItem, newItemIndex) {
  return array.map((item, index) => {
 
    if (index !== newItemIndex) {
      return item;
    }
 
    return {
      ...item,
      ...newItem,
    };
  });
}
 
class Game extends Component {
  constructor(props) {
    super(props);
 
    this.state = {board: new Array(25).fill({color: 'white'})};
  }
 
  changeCeilColor(index, color) {
    this.setState({
      board: updateObjectInArray(this.state.board, {color}, index),
    });
  }
 
  randomCeilIndex() {
    return Math.floor(Math.random() * this.state.board.length);
  }
 
  render() {
    return (
      <div>
        <button onClick={() => this.changeCeilColor(this.randomCeilIndex(), 'red')}>Play</button>
        {this.state.board.map(({color}, i) => (
          <div
            className="cell"
            style={{
              backgroundColor: color,
            }}
            onClick={() => this.changeCeilColor(i, 'green')}
          />
        ))}
      </div>
    );
  }
}
1
0 / 0 / 0
Регистрация: 24.11.2019
Сообщений: 36
25.11.2019, 11:35  [ТС] 8
Спасибо.

Добавлено через 32 минуты
Шикарно. Но некоторых вещей я не понял.
0
1786 / 1036 / 445
Регистрация: 12.05.2016
Сообщений: 2,550
25.11.2019, 11:43 9
Цитата Сообщение от Евгений_1827 Посмотреть сообщение
Но некоторых вещей я не понял.
Евгений_1827, спрашивайте.
0
25.11.2019, 11:43
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
 25.11.2019, 11:43
Помогаю со студенческими работами здесь

Изменить body.backgroundColor через DOM?
Можно ли так сделать? Как изменить цвет фона боди при событии онклик? Как вообще получить боди....

Отображение diva
Друзья, помогите сделал какую-то ерунду. Как, при нажатии на пункт меню, скрывались старые картинки...

Ширина diva
Здравствуйте. Не задается длинна дива указанного на рисунке, как была 66 пикселей так и осталась, а...

Изменить расположение diva
&lt;div id=&quot;main&quot;&gt; &lt;div id=&quot;navigation&quot;&gt; &lt;ul class=&quot;menuUL&quot;&gt; &lt;!-- The class...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
9
Ответ Создать тему
КиберФорум - форум программистов, компьютерный форум, программирование
Поддержать - Реклама - Обратная связь
Powered by vBulletin
Copyright ©2000 - 2024, CyberForum.ru