How can I detect onclick() or similar for individual characters in a text?

Question

I'm new to Javascript and would like to modify a text string by clicking on individual characters. The string is: 0000 0000 0000 0000 representing a binary number. I would like to be able to toggle a 0 to a 1 by clicking directly on the text.

I have tried to use onclick() but have only managed to detect a click for the entire paragraph. What would be an appropriate method to detect which character is clicked?

Answer 1

For such a small number of characters, the easiest way is to put each of them in its own span:

<span>0</span><span>0</span><span>0</span><span>0</span> <span>0</span><span>0</span><span>0</span><span>0</span> <span>0</span><span>0</span><span>0</span><span>0</span>

I'd also put all of those in a container, and hook the click event on the container rather than on the individual spans, so:

<div id="container">
    <span>0</span><span>0</span><span>0</span><span>0</span> <span>0</span><span>0</span><span>0</span><span>0</span> <span>0</span><span>0</span><span>0</span><span>0</span>
</div>

Then hook it up:

var container = document.getElementById("container");
if (container.addEventListener) {
    container.addEventListener('click', clickHandler, false);
}
else if (container.attachEvent) {
    container.attachEvent('onclick', function(e) {
        return clickHandler.call(container, e || window.event);
    });
}

In your click handler, use event.target to find out which span was clicked:

function clickHandler(event) {
    var span = event.target;
    // Do something with the span, such as look at its `innerHTML` and
    // see if it's "0" -- if so, make it "1"; if not, make it "0"
}

More to explore:

• DOM2 Specification
• DOM3 Specification
• DOM2 HTML
• HTML5 Web Application APIs

---

As you can see above, I had to work around the fact that some browsers use the standard addEventListener, and others (IE8 and earlier) use attachEvent. I recommend using a good JavaScript library like jQuery, Prototype, YUI, Closure, or any of several others. They smooth over those kinds of browser inconsistencies for you, and add a lot of very useful utility functionality so you can focus just on what you're trying to do.

For example, that handler code written using jQuery:

$("#container").on("click", "span", function() {
    // `this` refers to the span that was clicked; you can use
    // `innerHTML` as above, or wrap it in a jQuery instance
    // like this:
    //    var $this = $(this);
    // ...and then use jQuery's `html` function to both
    // retrieve and set the HTML.
});

Answer 2

You'd need to add a container round each character, preferably an inline div or a span. This question has an excellent example on adding wrapper to each character:

JavaScript regular expression: inserting span tag for each character