Welcome to WebmasterWorld Guest from 54.166.87.123

Forum Moderators: open

Message Too Old, No Replies

Isolating onclick or mouseover events

   
10:35 pm on Aug 24, 2013 (gmt 0)

5+ Year Member Top Contributors Of The Month



If a user clicks or mouseovers the rating div, is there any way to isolate the specific span id without bloating the HTML?

<div id="rating">
<span id="s1" title="1 Star">&#9733;</span>
<span id="s2" title="2 Stars">&#9733;</span>
<span id="s3" title="3 Stars">&#9733;</span>
<span id="s4" title="4 Stars">&#9733;</span>
<span id="s5" title="5 Stars">&#9733;</span>
</div>

<script type="text/javascript">
<!--
document.getElementById("rating").onmouseover = function(){
console.log('The span id moused over is');}
document.getElementById("rating").onclick = function(){
console.log('The span id clicked on is');}
//-->
</script>
1:00 am on Aug 25, 2013 (gmt 0)

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month



First, get rid of those HTML comments between your script tags. That hasn't been needed for about 15 years, yet people keep including them (old habits in some cases, cut and paste code in others).


document.getElementById("rating").onmouseover = function(event){
event = event || window.event;
var target = event.target || event.srcElement;
console.log('The span id moused over is ' + target.id);
}
document.getElementById("rating").onclick = function(event){
event = event || window.event;
var target = event.target || event.srcElement;
console.log('The span id clicked on is ' + target.id);
}
6:22 am on Aug 25, 2013 (gmt 0)

5+ Year Member Top Contributors Of The Month



Thanks Fotiman!

In regards to removing the HTML comments, is it just because modern day browsers all support JavaScript?

If I'm able to use progressive enhancements and not require JavaScript is there a reason besides byte savings why I should take them and the type attributes from my code?
9:11 pm on Aug 25, 2013 (gmt 0)

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month




In regards to removing the HTML comments, is it just because modern day browsers all support JavaScript?

Yes. The "hack" of putting HTML comments in the script tag was needed for Mosaic and Netscape browsers which have been extinct for a loooooooooong time. It saves bytes to omit them since they're pointless, but also it's technically not correct to wrap code that's meant to be executed in comments. As I said, this was a hack.

If you put the script in an external file (which is really where it should be), then you wouldn't have those comments anyway. As for the type attribute, that's also not needed (all browsers default to type text/javascript). However, it depends on if you're going to validate your HTML, and if so, which DOCTYPE you're using. For example, it's valid to leave out the type attribute on script tags in HTML5, but they're required for HTML 4.01.