Question

Having colorized source code (by GeSHi or tool like http://tohtml.com) like this:

<pre style='color:#000000;background:#ffffff;'>
<ol>
<li><a href="#1"><span style='color:#004a43; '>#</span><span style='color:#004a43; '>include </span><span style='color:#800000; '>&lt;</span><span style='color:#40015a; '>iostream</span><span style='color:#800000; '>></span></a></li>
<li> </li>
<li><span style='color:#800000; font-weight:bold; '>using</span> <span style='color:#800000; font-weight:bold; '>namespace</span> <span style='color:#666616; '>std</span><span style='color:#800080; '>;</span></li></li>
<li> </li>
<li><span style='color:#800000; font-weight:bold; '>int</span> <span style='color:#400000; '>main</span><span style='color:#808030; '>(</span><span style='color:#808030; '>)</span> <span style='color:#800080; '>{</span></li>
<li> </li>
<li>    <span style='color:#800000; font-weight:bold; '>int</span> intNum <span style='color:#808030; '>=</span> <span style='color:#008c00; '>0</span><span style='color:#800080; '>;</span></li>
<li>    </li>
<li>    <span style='color:#603000; '>cin</span> <span style='color:#808030; '>></span><span style='color:#808030; '>></span> intNum<span style='color:#800080; '>;</span></li>
<li>    <span style='color:#800000; font-weight:bold; '>while</span> <span style='color:#808030; '>(</span>intNum <span style='color:#808030; '>!</span><span style='color:#808030; '>=</span> <span style='color:#008c00; '>42</span><span style='color:#808030; '>)</span> <span style='color:#800080; '>{</span></li>
<li>        <span style='color:#603000; '>cout</span> <span style='color:#808030; '>&lt;</span><span style='color:#808030; '>&lt;</span> intNum <span style='color:#808030; '>&lt;</span><span style='color:#808030; '>&lt;</span> <span style='color:#800000; '>"</span><span style='color:#0f69ff; '>\n</span><span style='color:#800000; '>"</span><span style='color:#800080; '>;</span></li>
<li>        <span style='color:#603000; '>cin</span> <span style='color:#808030; '>></span><span style='color:#808030; '>></span> intNum<span style='color:#800080; '>;</span></li>
<li>    <span style='color:#800080; '>}</span></li>
<li> </li>
<li>    <span style='color:#800000; font-weight:bold; '>return</span> <span style='color:#008c00; '>0</span><span style='color:#800080; '>;</span></li>
<li> </li>
<li><span style='color:#800080; '>}</span></li>
</ol>
</pre>

screenshot:

I want to create mechanism which will colorize clicked by user line. I know that I need to change background-color of specific li element. I wondering how can I achieve that.

Is this will be ok, to add to each line:

<liid='id1'><a href="javascript:color('1')">...</a></li>

<liid='id2'><a href="javascript:color('2')">...</a></li>

• Is it necessary, to add unique id to each li element?
• Is it possible to pass to JS function some kind of id/”this pointer”/whatever what will point JS function, which element should be changed?

EDIT:

One more requirement: after all, I need to pass information about which line was clicked, to URL. I want to do that without reloading a webpage, so I want to add something like #NUMBER_OF_CLICKED_LINE

Answer 1

One approach to simply highlight the list elements is to use:

var ol = document.getElementsByTagName('ol')[0];
var lis = ol.getElementsByTagName('li');
var highlight = '#ffa';

for (i=0;i<lis.length;i++){
    lis[i].onclick = function(){
        this.style.backgroundColor = highlight;
    };  
}

JS Fiddle demo.

With regards to the need for the clicked-line to be appended to the URL as a hash (something which can’t be easily demonstrated by JS Fiddle):

var ol = document.getElementsByTagName('ol')[0];
var lis = ol.getElementsByTagName('li');
var highlight = '#ffa';

for (i=0;i<lis.length;i++){
        lis[i].setAttribute('data-Index',i);
    lis[i].onclick = function(){
        this.style.backgroundColor = highlight;
        document.location.hash = 'line=' + this.getAttribute('data-index');
    };  
}

JS Fiddle demo.