CODEWITHSUNDEEP
javascriptjqueryjquery-ui
windsurf88
windsurf88

Reputation: 109

Using Javascript / Jquery to change text in div upon button click

here is the array

var copyText= [
'this is the first line',
'Simply put, the second line',
'impressed by the third line.'
    ];

These don't work ...

$("#thisbutton").click(function () {
$("#thetext").innerHTML("meow meow");
});

or 

$("#thisbutton").click(function () {
$("#thetext").innerHTML(copyText[1]);
});

or 

$("#thisbutton").click(function () {
$("#thetext").text(copyText[1]);
});


$("#thisbutton").click(function () {
$("#thetext").html(copyText[1]);
});

What I am missing? thks.

Upvotes: 3

Views: 12781

Answers (3)

Jacob Relkin
Jacob Relkin

Reputation: 163228

First of all, innerHTML is a native DOMElement property, not a jQuery method. jQuery's html method is the equivalent.

Secondly, you are not wrapping this in a ready handler:

Try this:

$(function() {
  var copyText= [
   'this is the first line',
   'Simply put, the second line',
   'impressed by the third line.'
  ];
  $("#thisbutton").click(function () {
     $("#thetext").text(copyText[1]);
  });

});

jsFiddle example

Upvotes: 6

Sairam
Sairam

Reputation: 2898

If you want to replace the complete div try replaceWith() jquery function

 $("#thetext").replaceWith("htmldata");

Reference: http://api.jquery.com/replaceWith/

Upvotes: 0

Brian
Brian

Reputation: 38025

This worked for me...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
    <div id="thetext">

    </div>
    <input type="button" id="thisbutton" value="Click" />
<script src="Scripts/jquery-1.4.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(function () {
        $("#thisbutton").click(function () { $("#thetext").html("meow meow"); });
    });
</script>
</body>
</html>

Upvotes: 0

Related Questions