jQuery to change div content when click span

Question

So This is the html I wrote:

<html>
<head>
<script type="text/javascript" src="language.js"></script>
</head>
<body>
   <div class="eng"> Change this English sentence </div>
   <span id="frn" style="text-decoration:underline">French</span>
</body>

Meanwhile, the jQuery:

$(document).ready(function(){
    $("#frn").on('click', function(){
        $(".eng").html("modifier cette phrase en anglais");
    });
});

I use Microsoft Expression Web 4.0.1460.0 to generate this codes. So, what I want to do is change the text on a div when user click on span. In this case, change a defined text from english to french when someone click on span with text French and ID #frn.

However, when I preview this on Google Chrome. It didn't work. By clicking the span, nothing happened. Please kindly help me on this.

it would seem that you are not linking the jQuery library in your page before calling the function — gavgrif, Jun 09 '16 at 02:14
welcome - its also better if you put all js code at the end of the page for speed in page loading. just a thought - happy coding :)) — gavgrif, Jun 09 '16 at 02:23

score 1 · Accepted Answer · answered Jun 09 '16 at 02:15

1

HI check the updated code you havent include the jquery library , this works fine.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("#frn").on('click', function(){
        $(".eng").html("modifier cette phrase en anglais");
    });
});
</script>
</head>
<body>



  <div class="eng"> Change this English sentence </div>
   <span id="frn" style="text-decoration:underline">French</span>

</body>
</html>

Happy Coding

answered Jun 09 '16 at 02:15

Gayathri Mohan

2,924
4
19
25

Ah yes, I forgot that! Thank you for your kind help. – brandeluke Jun 09 '16 at 02:20
@brandeluke Hi, please mark this answer as correct answer if it helped you. Look for doing this in the future.. Thanks and cheers. ;) – webta.st.ic Jun 09 '16 at 05:41

score -1 · Answer 2 · answered Jun 09 '16 at 02:14

-1

It is working fine in this JSFiddle

https://jsfiddle.net/5g3decLd/1/

Also, I would suggest to change html() to text()

$(".eng").text("modifier cette phrase en anglais");

answered Jun 09 '16 at 02:14

SenthilKumarM

119
1
8

jQuery to change div content when click span

2 Answers2