Change text of span element when clicking on it using jquery

Question

This is my HTML code:

<div id="trashico">
    <img class="deskico" src="images/trashico.png"/>
    <p><span class="caption">Trash</span></p>
</div>

Here I want to use jQuery to change the text of the span when I click on the div. So what jQuery should I have to write?

You need to write a click event handler which will change the contents of the span — Arun P Johny, Jul 28 '15 at 11:29
Since you're working with jQuery can we see what you have tried so far? — NewToJS, Jul 28 '15 at 11:30
` $('#trashico').click(function() { $(this).find('span').text('Give Your Changed Text'); });` — Sudharsan S, Jul 28 '15 at 11:30
I want to rename text. For example here there is a **Trash**. Instead of trash i have to changed as i want. — Nisarg Bhavsar, Jul 28 '15 at 11:30
[How to change span's text](http://stackoverflow.com/questions/7222195/how-can-i-change-the-text-inside-my-span-with-jquery). [Bind an event handler click](https://api.jquery.com/click/). — actaram, Jul 28 '15 at 11:30
So you won't be clicking the **div** you will be clicking the div's child element `span`? — NewToJS, Jul 28 '15 at 11:32
You don't have any name attributes set to change. You have innerHTML and class name. — NewToJS, Jul 28 '15 at 11:35
[here](http://www.lamusamusic.com/) is my site.When you open it you will see Two folder. When you click on trash then you can rename it as you want. so check it then tell me what should i have to do? — Nisarg Bhavsar, Jul 28 '15 at 11:37
@Nisarg You are aware that javascript is client-side so renaming something will only happen for the client editing it... (on page reload/refresh changes will revert to the original. _ before any client-side changes_) This won't update your website unless you have some server-side language editing and saving the changes... — NewToJS, Jul 28 '15 at 11:42
I think making the field content-editable will be what OP wants. It can then be ajaxed to the server — mplungjan, Jul 28 '15 at 12:38
No mention of ajax or sending data. Maybe the op should be more clear on what the end goal is/ wish to achieve. — NewToJS, Jul 28 '15 at 12:45

score 5 · Answer 1 · answered Jul 28 '15 at 11:32

5

You can do like this

$('#trashico').click(function(){
   $(this).find('span').text('your text');
});

answered Jul 28 '15 at 11:32

Hari Chaudhary

630
1
7
20

1

Why is this answer downvoted? This code works. An answer to a bad question should not be downvoted simply for existing. – Rory McCrossan Jul 28 '15 at 11:35

score 4 · Answer 2 · answered Jul 28 '15 at 11:33

4

You can change the text of the span on the click event -

$('#trashico').on('click', function() {
    $(this).find('span').text('new text');
})

Fiddle

answered Jul 28 '15 at 11:33

Sougata Bose

31,517
8
49
87

2

Why is this answer downvoted? This code works. An answer to a bad question should not be downvoted simply for existing. – Rory McCrossan Jul 28 '15 at 11:35
@RoryMcCrossan The same thing I am thinking also. :) – Sougata Bose Jul 28 '15 at 11:35
want to create functionality as we used in computer.Click on folder and press f2 key and we rename that folder.This functionality i have to create. so what should i have to do? – Nisarg Bhavsar Jul 28 '15 at 11:42
@Nisarg You want rename facility like `OS`s? – Sougata Bose Jul 28 '15 at 11:44
1

To make changes to web pages or directories will require a server-side language. Javascript is client-side. – NewToJS Jul 28 '15 at 11:46
You can use links to identify folders and rename them. Also need have proper permissions. – Sougata Bose Jul 28 '15 at 11:48
@Nisarg Javascript/jQuery is executed in the clients browser hence client-side. Languages like php are server-side, php commands are executed on the hosting server. I hope that helps you understand the difference. – NewToJS Jul 28 '15 at 11:52
he's talking about the same functionality as what f2 does when pressed on a OS. replication of this is possible on the web page itself! – Imesh Chandrasiri Jul 28 '15 at 12:01
@DimalChandrasiri That is not the answer. That will not the change the folder name on the drive. – Sougata Bose Jul 28 '15 at 12:04
@b0s3 that's exactly what I'm trying to explain but with the difference of client and server side languages. – NewToJS Jul 28 '15 at 12:43

Imesh Chandrasiri · Answer 3 · 2015-07-28T12:00:22.620

3

write the folowing click event

$('#trashico').click(function(){
   $('.caption').text('What ever new name you want');
})

Update answer

As for what you try to achieve is sort of the windows F2 functionality. Try the following logic. You would have to implement it using the base idea I've given.

$('#trashico').click(function(){
    $(this).addClass('active'); //Add a seperate class to identify on what is clicked
})

$(document).keyup(function(e){
   if(e.keycode == 113 && $('.active').length > 0){
      $('.caption').text('change name');
   }
})

The above code will add a class to the clicked icon on your page. Sort of selected folder on windows. Then there is a keyup event bound to the document where it'll listen to what keys are pressed. when it hits 113 ( is the keycode for F2 ) then the if condition would be true and you would be able to change the name.

This is the basic logic of the OS renaming function. You would have to go through this base to achieve your requirement.

edited Jul 28 '15 at 12:00

answered Jul 28 '15 at 11:30

Imesh Chandrasiri

5,558
15
60
103

why the down vote without correcting the error. This answer is not wrong! Please explain why the answer was downvoted! – Imesh Chandrasiri Jul 28 '15 at 11:34
1

Why is this answer downvoted? This code works. An answer to a bad question should not be downvoted simply for existing. – Rory McCrossan Jul 28 '15 at 11:35
I think someone is down voting all answers for some silly reason. I will up on all correct answers. – NewToJS Jul 28 '15 at 11:36
2

Most of the downvotes are done before the edit. Revertred my downvote. – Sougata Bose Jul 28 '15 at 11:36
Maybe someone is down voting so the OP doesn't bother marking the answer giving them chance to submit another answer to get the mark/points. – NewToJS Jul 28 '15 at 11:38
Yes bt one should atleast try to explain why it's been downvoted. – Imesh Chandrasiri Jul 28 '15 at 11:38
2

Yes one should. Before the edit it has only the `click` event but not the way to change the text. Hope you can understand. :) – Sougata Bose Jul 28 '15 at 11:39
Yeah it was! So I edited the answer cus what I wrote was not answering the question entirely! – Imesh Chandrasiri Jul 28 '15 at 11:40

imGaurav · Answer 4 · 2015-07-28T11:42:25.353

0

$('#trashico').click(function() {
  $('#trashico > p > span').text("changed text");

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="trashico">
  <img class="deskico" src="images/trashico.png" />
  <p><span class="caption">Trash</span>
  </p>
</div>

edited Jul 28 '15 at 11:42

answered Jul 28 '15 at 11:35

imGaurav

1,043
7
14

score 0 · Answer 5 · answered Jul 28 '15 at 11:35

0

Try the following solution. Here we are changing the text of span tag with class caption:

$("#trashico").click(function(){
   $(this).find(".caption").text('New Text') }
});

answered Jul 28 '15 at 11:35

Rajan Goswami

769
1
5
17

Change text of span element when clicking on it using jquery

5 Answers5