templating button actions using js

A

aaron

Hi there,

I'm currently using javascript to format buttons as follows.

<input type="submit" value="Submit" title="" onmouseover="this.style.background='blue'" onmouseout="this.style.background='#FF1199'">

What I would like to know is is there a way that I can have a templated button? This would mean that the if I change the formatting so that the onmouseover colour is 'red' instead in one place it would affect all buttons?

Cheers,
A
 
J

Jukka K. Korpela

aaron said:
I'm currently using javascript to format buttons as follows.

<input type="submit" value="Submit" title=""
onmouseover="this.style.background='blue'"
onmouseout="this.style.background='#FF1199'">

What I would like to know is is there a way that I can have a
templated button? This would mean that the if I change the formatting
so that the onmouseover colour is 'red' instead in one place it would
affect all buttons?
Click to expand...

You can do that without using Javascript at all, using just the CSS rules

input[type="submit"] { background: #f19; }
input[type="submit"]:hover { background: blue; }

This fails on some old versions of IE, but on the other hand, on supporting
browsers, it works even when Javascript is disabled. Note: It also fails on
modern versions of IE in "Quirks Mode", so if your page currently works in
"Quirks Mode", this might not be a feasible way. The simplest way to avoid
"Quirks Mode" is to have
<!DOCTYPE html>
as the first line of the HTML document.

If you want (or need) to do this in Javascript, you can use e.g. the
following (executed after the document is loaded, so e.g. put it in your
onload event handler or place the script element at the very end of the
document body):

var input = document.getElementsByTagName("input");
for(var i = 0; i < input.length; i++) {
if(input.type == "submit") {
input.onmouseover = function () {this.style.background = "blue"};
input.onmouseout = function () {this.style.background = "#f19"}; }}
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Using JS to verify registration info? 1
Templating library which generates HTML+JS for interfacing RESTfully? 0
How to create a JSON array with values from DOM(HTML TABLE) when I click a button using JQuery/Javascript? 0
Im having trouble containing a title an image and a button 2
My sliding panel in React Js with graphs on it renders nothing but a blank screen--need help 0
I Need Help with making a function that draws in a canvas using location data. 1
Help with Visual Lightbox: Scripts 2
Question about literals 1

Members online

Total: 29 (members: 1, guests: 28)
Robots: 120

Forum statistics

Threads
473,776
Messages
2,569,602
Members
45,184
Latest member
ZNOChrista

Latest Threads

Top