Geek Answers Handbook

How can I detect onclick () or the like for individual characters in the text?

I am new to Javascript and would like to change the text string by clicking on individual characters. String: 0000 0000 0000 0000representing a binary number. I would like to be able to switch 0to 1by clicking directly on the text.

I tried using onclick () but only could detect a click for the whole paragraph. What would be the appropriate method to detect which character is pressed?

+5
source share
6 answers

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

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

click , , :

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

:

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

event.target, , :

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

:

, , addEventListener, (IE8 ) attachEvent. JavaScript, jQuery, Prototype, YUI, Closure, . , , .

, , 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 `html` function to both
    // retrieve and set the HTML.
});
+4

, div span. :

JavaScript: span

+2

dom (, ).

, HTML

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

  • nodeValue var $node = $('.binary'), text = $node.text();
  • text = $.trim(text); var characters = text.split('');
  • text = '<span>' + characters.join('</span><span>') + '</span>';
  • $node.html(text);
  • $node.on('click', 'span', function(e){ /* handle */ });

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

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

:

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';
});
+1

0 , . Event.target, , .

0

.

node, , , , .

0000 0000 0000 0000, , , span. , , click .

0

, : window.event.clientX window.event.clientY X Y .

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

,

-1

More articles:


All Articles