Use JS to change background colour
Question
I am an absolute beginner, and thought that I'd see if i could copy this seemingly basic project ( http://jenniferdewalt.com/random_background.html ). Rather than just copy the code, I want to figure out why I can't get it to work. I really have no idea how JS interacts with HTML. Here's what i've got:
HTML:
<link type="text/css" rel="stylesheet" href="../../CSS/randomcolor/randomcolour.css" />
<link type="text/javascript" src="../../JS/Random Colour/randomcolour.js">
<script type="text/javascript" src="../../JS/Random Colour/randomcolour.js"></script>
</head>
<body>
<a href="javascript:void(0)" onclick="randomColor()";>
<div .class="button" id="button">
<h2></h2>
</div>
</a>
JS:
function randomColor() {
return '#' + Math.random().toString(16).slice(2, 8);
};
var backgroundColor = randomColor()
This is all probably a million miles off the mark, so if anyone can point me to a resource that will help me out at all, it'd be much appreciated. It's so frustrating not being able to figure this out!
4 answers
solution1
3 2013-12-18 01:23:03
Use this function to generate a random color!
function get_random_color() {
var letters = '0123456789ABCDEF'.split('');
var color = '#';
for (var i = 0; i < 6; i++ ) {
color += letters[Math.round(Math.random() * 15)];
}
return color;
}
And in your html, the period before class is not needed.
Then, set the body of the page with:
document.body.style.backgroundColor = get_random_color(); //or stick with randomColor();
It's also better practice not to use inline javascript, try setting the onclick event like this (removing it from the html)
var button = document.getElementById("button");
button.onclick = function() {
//set body style here
}
Oh, one more thing: you're trying to use a link tag to reference a javascript file -- this will not work. That's for CSS!
solution2
1 2013-12-18 01:19:58
公式为Element.style.backgroundColor = '#000000;'
solution3
1 2013-12-18 01:21:49
You are only storing the background color in a temporary variable, you need to store it into the backgroundColor css property of the body
so you need
document.body.style.backgroundColor = randomColor()
where you want to change the background color.
For examlple you could put this directly in the onClick handler, or call function that does this.
solution4
0 2013-12-18 01:31:15
The best way to do this is this.... very easy.
a. first define a function that return random values so less writing.
b. input those into rgba ...
c. you have what you want.
function rand(x){return Math.round(Math.random()*x);}
document.body.style.backgroundColor='rgba('+rand(255)+','+rand(255)+','+rand(255)+','+rand(10)/10+')';
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.