How Can I Detect Onclick() Or Similar For Individual Characters In A Text?

July 28, 2022 Post a Comment

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

Solution 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:

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.
});

Solution 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

Solution 3:

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

Baca Juga

<p class="binary">0000 0000 0000 0000</p>

you need to

get the nodeValue var $node = $('.binary'), text = $node.text();
trim and explode the binary number text = $.trim(text); var characters = text.split('');
wrap each character in a span text = '<span>' + characters.join('</span><span>') + '</span>';
inject the wrapped characters $node.html(text);
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 = '<span>' + characters.join('</span><span>') + '</span>';
$node.html(text).on('click', 'span', function(e) {
    // abort on empty node
    if (this.innerHTML == ' ') {
        return;
    }

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

Solution 4:

Put each 0 into a span and register an eventhandler on the whole paragraph, in order to use delegation. Use Event.target property to change the text of the span you clicked on in the event handler.

Solution 5:

You can't assign event to single character in text.

You would have to assign click handler to node holding the text, and then check caret position to determine yourself which of the character has been clicked.

One of other possible solutions could be splitting text 0000 0000 0000 0000, so that every character is wrapped in span element for example. Then you can bind click handler to those spans and easily determine which character has been clicked because click event will be fired for one, specific character.

JavaScript Sample