Reputation: 7
<!DOCTYPE html>
<html>
<head>
<title>Button Homework</title>
<script>
function first() {
document.getElementById('type1').style.left= "100px";
}
function second() {
document.getElementById('type1').style.position = 'absolute';
}
</script>
</head>
<body>
<h1>Special Button</h1>
<input id = 'type1' type = 'button' value = 'Click' onclick = 'output();'
onmouseover= 'first'() onmouseout= 'second'();' />
</body>
</html>
I'm trying to get my button to move to the middle whenever you hover over it but I can't seem to do so. That's my coding, can someone please help me out? thanks!
Upvotes: 0
Views: 60
Reputation: 3920
You need to have position:absolute
to make left
css property work. Also I corrected your function call in input
field, please check
<script>
function first() {
let randomValue1 = Math.floor(Math.random()*255);
let randomValue2 = Math.floor(Math.random()*255);
let randomValue3 = Math.floor(Math.random()*255);
let randomColor = `rgb(${randomValue1},${randomValue2},${randomValue3})`;
document.getElementById('type1').style.position = 'absolute';
document.getElementById('type1').style.left= "100px";
document.getElementById('type1').style.backgroundColor= randomColor;
}
function second() {
document.getElementById('type1').style.position = 'absolute';
document.getElementById('type1').style.left= "0px";
document.getElementById('type1').style.backgroundColor= 'rgb(239, 239, 239)';
}
</script>
<input id = 'type1' type = 'button' value = 'Click' onclick = 'output();'
onmouseover= 'first()' onmouseout= 'second()';' />
Upvotes: 1