5 Years
Discussion Span
Last Post by Taywin
<img id="myimage" onclick="changeImage()" src="pic_bulboff.gif" width="100" height="180">

function changeImage()
    if (element.src.match("bulbon"))

In this example, there is an onclick event that is bound to the HTML image element with an id of "myimage". The you click on this element, the onclick event executes the changeImage function. In that function, you will notice that the element with the id of myimage is assigned to the variable called "element". Since its an image, the element now has access to the information stored in the src attribute.

From there its just a conditional statement to figure out if the current value stored in the src attribute has a match for "bulbon". If it does, the src attribute is assigned a new value of "pic_bulboff.gif" which changes the picture. If the conditional statement results in FALSE, the src attribute is assigned the value of "pic_bulbon.gif".

So when the image is that of a bulb turned off and you click, the bulb image is changed to that of one being turned on. When its on, the picture changes to a bulb that is off.


Just a side note. You could replace the pattern string in match() with a regular expression (regex), and that would give you a lot more usefulness.

For example, element.src.match("bulbon") would attempt to match exactly "bulbon" word (case-sensitive). If you still want to make it case insensitive, you may have to convert all string to lower case before you match (element.src.toLowerCase().match("bulbon")). In regular expression, you could simply change the way you do to element.src.match(/bulbon/i).

One obvious usefulness of regex is matching non-static patterns. For example, you want to match 4 digit numbers that have unknown white spaces between them. It would be likely impossible to use string patterns because of the unknown.

//For example:
var a = "54   7 4  154"
var b = "8 234   8         32"
var c = "235  d 377 6"
// How would you deal with these string if you use string pattern?
// Well, you could but there will be tons of patterns you need to check.
// But in regex, you simply uses...
if(a.match(/\d+\s+\d+\s+\d+\s+\d+/)) { alert("Found pattern!") }
else { alert("Pattern not found: "+a) }
if(b.match(/\d+\s+\d+\s+\d+\s+\d+/)) { alert("Found pattern!") }
else { alert("Pattern not found: "+b) }
if(c.match(/\d+\s+\d+\s+\d+\s+\d+/)) { alert("Found pattern!") }
else { alert("Pattern not found: "+c) }

// a & b will be found, but c won't.

If you are interested in more advance, you should read up the regular expression. There are many tutorial about it. The one I like is this one because it gives a lot more in depth for beginners.

Edited by Taywin

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.