Javascript Mouseover button

Question

I think I'm close to getting this right but I can't figure out how to change the colour of my submit button when the user hovers over it, I'm very new too javascript so any help would be greatly appreciated

here is my code:

<html> <head> <title>JavaScript</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script> function getName(){ var name; name = window.prompt("Enter your name", ""); greeting = "User Information for " + name; var txt= document.getElementById('txtWelcome'); txt.innerHTML=greeting; } function over() { document.getElementById("Submit").style.background = 'Blue'; } function out() { document.getElementById("Submit").style.background = 'Yellow'; } </script> </head> <body onload="getName()"> <form class="basic_form"> <h1 id="txtWelcome"></h1> <p>Please input your login details</p> <fieldset> <label class="form_labels">Username:</label> <input class="form_fields" type="text" name="username"><br> <label class="form_labels">E-Mail:</label> <input class="form_fields" type="email" name="email"><br> <label class="form_labels">Password:</label> <input class="form_fields" type="password" name="password"> <input class="form_buttons" type="Submit" value="Submit"><br> </fieldset> </form> </body>

Fhtagn · Accepted Answer · 2016-03-09 22:07:34Z

Here's the javascript solution:

var submitButton = document.getElementById('submit'); submitButton.addEventListener('mouseover', function() { this.style.backgroundColor='blue'; }); submitButton.addEventListener('mouseout', function() { this.style.backgroundColor='yellow'; });

https://jsfiddle.net/hsxdkkp6/

But why not just use css?

input[type=submit]:hover { background-color: red; }

https://jsfiddle.net/jkkj8dvt/

Collectives™ on Stack Overflow

Javascript Mouseover button

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related