英文:
When random number hits certain value, h1 or button should change color
问题
const button = document.getElementById('button');
const h1 = document.getElementById('h1');
button.addEventListener('click', function () {
const r = Math.floor(Math.random() * 255);
const g = Math.floor(Math.random() * 255);
const b = Math.floor(Math.random() * 255);
const newColor = `rgb(${r}, ${g}, ${b})`;
document.body.style.backgroundColor = newColor;
h1.innerText = newColor;
});
button.addEventListener('click', function () {
if (parseFloat(r) >= 150 || parseFloat(g) >= 150 || parseFloat(b) >= 150) {
document.button.style.backgroundColor = '#000';
document.button.style.color = '#fff';
} else if (parseFloat(r) >= 60 || parseFloat(g) >= 60 || parseFloat(b) >= 60) {
document.h1.style.color = '#fff';
}
});
英文:
I made a random color generator and while it generates the random colors and displays the numbers, when it gets very dark on the page I wanted the h1 to become white and the button to become black if it became very bright.
const button = document.getElementById('button');
const h1 = document.getElementById('h1');
button.addEventListener('click', function (){
const r = Math.floor(Math.random() * 255);
const g = Math.floor(Math.random() * 255);
const b = Math.floor(Math.random() * 255);
const newColor = `rgb(${r}, ${g}, ${b})`;
document.body.style.backgroundColor = newColor;
h1.innerText = newColor;
});
button.addEventListener('click', function (){
if(parseFloat(r >= 150 || g >= 150 || b >= 150)) {
document.button.style.backgroundColor = '#000';
document.button.style.color = '#fff';
} else if(parseFloat(r >= 60 || g >= 60 || b >= 60)) {
document.h1.style.color = '#fff';
}
});
I think there is an issue with my parseFloat but I am unsure. I think the issue is that the number becomes a string and isn't converted back properly?
Right now my code just does not respond to the second portion where I ask the 'if' statements.
答案1
得分: 1
需要在一个函数中完成所有操作，因为变量在第二个函数中不可见。
也不需要调用 parseFloat()。您已经在这些变量中有数字。
document.button 和 document.h1 应该改为 button 和 h1。
button.addEventListener('click', function() {
const r = Math.floor(Math.random() * 255);
const g = Math.floor(Math.random() * 255);
const b = Math.floor(Math.random() * 255);
const newColor = `rgb(${r}, ${g}, ${b})`;
document.body.style.backgroundColor = newColor;
h1.innerText = newColor;
if (r >= 150 || g >= 150 || b >= 150) {
button.style.backgroundColor = '#000';
button.style.color = '#fff';
} else if (r >= 60 || g >= 60 || b >= 60) {
h1.style.color = '#fff';
}
});
英文:
You need to do everything in one function, because the variables aren't visible in the second function.
There's also no need to call parseFloat(). You already have numbers in those variables.
document.button and document.h1 should just be button and h1.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
button.addEventListener('click', function() {
const r = Math.floor(Math.random() * 255);
const g = Math.floor(Math.random() * 255);
const b = Math.floor(Math.random() * 255);
const newColor = `rgb(${r}, ${g}, ${b})`;
document.body.style.backgroundColor = newColor;
h1.innerText = newColor;
if (r >= 150 || g >= 150 || b >= 150) {
button.style.backgroundColor = '#000';
button.style.color = '#fff';
} else if (r >= 60 || g >= 60 || b >= 60) {
h1.style.color = '#fff';
}
});
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论