CODEWITHSUNDEEP
javascriptstringonclick
foo
foo

Reputation: 387

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

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?

Upvotes: 6

Views: 5243

Answers (6)

rodneyrehm
rodneyrehm

Reputation: 13557

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

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

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 = '<span>' + characters.join('</span><span>') + '</span>';
  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 = '<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';
});

Upvotes: 1

T.J. Crowder
T.J. Crowder

Reputation: 1074198

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

Upvotes: 4

Efhache
Efhache

Reputation: 167

Maybe you can may be use coordinates of mouse when detect click: window.event.clientX and window.event.clientY gives you the X and Y coordinates of the mouse position.

function SetValues()
{
  var s = 'X=' + window.event.clientX + ' Y=' + window.event.clientY ;
  document.getElementById('divCoord').innerText = s;
}

and then you check the coordinates to fix the clicked text

Upvotes: 0

WTK
WTK

Reputation: 16961

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.

Upvotes: 0

mpm
mpm

Reputation: 20155

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.

Upvotes: 0

HeavenCore
HeavenCore

Reputation: 7683

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

Upvotes: 2

Related Questions