<span id="counter">0</span>
<pre id="my-pre">test</pre>
<script>
var counter = 0,
counterSpan = document.getElementById('counter');
//add the click listener using addEventListener, this is preferred over inline handlers
document.getElementById('my-pre').addEventListener('click', function () {
counterSpan.innerHTML = ++counter;
});
</script>
However putting your scripts directly after HTML elements will quickly get messy. A better alternative would be to modularize your code.
//Create an object that represents your feature and encapsulates the logic
var CounterFeature = {
count: 0,
init: function (preElSelector, countElSelector) {
var preEl = this.preEl = document.querySelector(preElSelector);
this.countEl = document.querySelector(countElSelector);
preEl.addEventListener('click', this.increment.bind(this));
return this;
},
increment: function () {
this.countEl.innerHTML = ++this.count;
}
};
//wait until the DOM is ready and initialize your feature
document.on('DOMContentLoaded', function () {
//create a new instance of the CounterFeature using Object.create
//and initialize it calling `init`
var counterFeature = Object.create(CounterFeature).init('#my-pre', '#counter');
//you could also simply use the singleton form, if you do not plan to have
//more than one CounterFeature instance in the page
//CounterFeature.init(...);
});