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 num

Answer 1

you would need to make each character addressable to the dom (by wrapping it in a span, for example).

say you've got this HTML

0000 0000 0000 0000

you need to

1. get the nodeValue var $node = $('.binary'), text = $node.text();
2. trim and explode the binary number text = $.trim(text); var characters = text.split('');
3. wrap each character in a span text = '' + characters.join('') + '';
4. inject the wrapped characters $node.html(text);
5. register a delegated event handler $node.on('click', 'span', function(e){ /* handle */ });

your handle could look like

function(e) {
  // abort on empty node
  if (this.innerHTML == ' ') {
    return;
  }

  this.innerHTML = this.innerHTML == '1' ? '0' : '1';
}

putting things together:

var $node = $('.binary'), 
    text = $.trim($node.text()),
    characters = text.split('');

text = '' + characters.join('') + '';
$node.html(text).on('click', 'span', function(e) {
    // abort on empty node
    if (this.innerHTML == ' ') {
        return;
    }

    this.innerHTML = this.innerHTML == '1' ? '0' : '1';
});