Q:

Changing background color of a bootstrap panel

I am trying to change the background color of a panel using javascript to emulate "selected" functionality. 
So, on click I get hold of the div by ID and change its background color. 
It works fine but only momentarily and again resets the background color, and I have no idea why? 
DJANGO HTML Template
<div class="panel-group">
    {% if articles %}
        {% for article in articles %}
            <div class="panel panel-success" id="aid_{{ article.articleId }}">
                 <div class="panel-body">
                    <a href="" onclick="populateArticle({{ article.articleId }})" style="font-size: 1.2em"><b>{{ article.title }}</b></a><br/>
                    <span style="color:darkgrey; font-size:.9em; font-family:sans-serif; font-style:italic">{{ article.source }} - {{ article.date }}</span><br/>
                    {{ article.sentences }}
                 </div>
            </div>
        {% endfor %}
    {% else %}
        NO ARTICLES PRESENT
    {% endif %}
</div>

Javascript
function populateArticle(aid) {
    document.getElementById('aid_'+aid).style.backgroundColor="#DEF1DE";
}

Also here is a link to a gif I recorded that shows the behavior: http://g.recordit.co/fSoTieo5Qn.gif (copy-paste the link in a new tab in case if it gives error).
Any ideas why this is happening? 

A:

You are not preventing default <a> tag behavior, so Your page refreshes.
onclick="populateArticle({{ article.articleId }});return false;"

Should fix it.

