xxxxxxxxxx
<script>
document.getElementById('change').onclick = changeColor;
function changeColor() {
document.body.style.color = "purple";
return false;
}
</script>
xxxxxxxxxx
const btn = document.getElementById('btn');
btn.addEventListener('click', function onClick() {
btn.style.backgroundColor = 'salmon';
btn.style.color = 'white';
});
xxxxxxxxxx
const btn = document.querySelector('button');
function random(number) {
return Math.floor(Math.random() * (number+1));
}
btn.onclick = function() {
const rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
document.body.style.backgroundColor = rndCol;
}
xxxxxxxxxx
const btn = document.getElementById('btn');
let index = 0;
const colors = ['salmon', 'green', 'blue', 'purple'];
btn.addEventListener('click', function onClick() {
btn.style.backgroundColor = colors[index];
btn.style.color = 'white';
index = index >= colors.length - 1 ? 0 : index + 1;
});
xxxxxxxxxx
function btnRed() {
document.getElementById("Div1").style.backgroundColor="Red";
}
function btnGreen() {
document.getElementById("Div2").style.backgroundColor="Green";
}
function btnBlue() {
document.getElementById("Div3").style.backgroundColor="Blue";
}
function btnReset() {
document.getElementById("Div1").style.backgroundColor="Black";
document.getElementById("Div2").style.backgroundColor="white";
document.getElementById("Div3").style.backgroundColor="white";
}
xxxxxxxxxx
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
</head>
<body>
<button id="btn">Button</button>
<script src="index.js"></script>
</body>
</html>