Javascript 如何修复背景色分配错误？

将

backgroundColor

分配给随机

div

时，会出现一个错误：

“TypeError:无法设置未定义的属性'backgroundColor'”（82行）

79 | const randomNumber=Math.floor（Math.random（）*25）；
80 | 
81 | 
82 |决斗[randomNumber].style.backgroundColor='blue'；
render（）{
const duel=['duel1'，'duel2'，'duel3'，'duel4'，'duel5'，'duel6'，
‘决斗七’、‘决斗八’、‘决斗九’、‘决斗十’、‘决斗十一’、‘决斗十二’、‘决斗十三’，
“决斗14”、“决斗15”、“决斗16”、“决斗17”、“决斗18”、“决斗19”、“决斗20”，
“决斗21”、“决斗22”、“决斗23”、“决斗24”、“决斗25”]；
const randomNumber=Math.floor（Math.random（）*25）；
决斗[randomNumber].style.backgroundColor='blue'；
返回(
玩
这里是25区
)
}

---

有什么问题吗？

duel既不是DOM元素，也不是带有

style

属性的React元素；这是一根绳子

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 randomNumber = Math.floor(Math.random() * 25);
const elementClassName = duel[randomNumber]
document.getElementsByClassName(elementClassName).style.backgroundColor='blue';

 return (
            <div>
                 <div>
                    <button>Play</button>
                </div>
                 <div className='duel25'>
                    here it is 25 div      
                </div>
            </div>
        )
    }

如果要随机更改某些元素的背景色，应尝试：

创建一个React元素（或DOM元素，例如

）

将元素放入数组（例如，

duel

）

通过

duel[randomNumber]更改样式。style.backgroundColor='blue'

---

我认为这更符合您的目的，您需要向div添加某种标识符，然后getElementsByClassName（在类名的情况下）来获取实际的元素，而不仅仅是一个字符串

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 randomNumber = Math.floor(Math.random() * 25);
const elementClassName = duel[randomNumber]
document.getElementsByClassName(elementClassName).style.backgroundColor='blue';

 return (
            <div>
                 <div>
                    <button>Play</button>
                </div>
                 <div className='duel25'>
                    here it is 25 div      
                </div>
            </div>
        )
    }

render（）{
const duel=['duel1'，'duel2'，'duel3'，'duel4'，'duel5'，'duel6'，
‘决斗七’、‘决斗八’、‘决斗九’、‘决斗十’、‘决斗十一’、‘决斗十二’、‘决斗十三’，
“决斗14”、“决斗15”、“决斗16”、“决斗17”、“决斗18”、“决斗19”、“决斗20”，
“决斗21”、“决斗22”、“决斗23”、“决斗24”、“决斗25”]；
const randomNumber=Math.floor（Math.random（）*25）；
const elementClassName=决斗[随机数]
document.getElementsByClassName（elementClassName）.style.backgroundColor='blue'；
返回(
玩
这里是25区
)
}

duel[randomNumber]不是元素。它只是一个字符串。而且，由于duel数组索引从0到24，因此获得这样的随机数不是一个好主意。试试elementClassName='duel'+randomNumber