Why doesn't this work?

Question

I want to change the value of an element with javascript.

<span id="mixui_title">Angry cow sound?</span>


<script type="text/javascript">
$("#mixui_title").val("very happy cow");
</script>

Answer 1

Try html() function instead :

<span id="mixui_title">Angry cow sound?</span>

<script type="text/javascript">
$("#mixui_title").html("very happy cow");
</script>

Answer 2

Use the text method instead:

$("#mixui_title").text("very happy cow");

Answer 3

It's not enclosed by the

$(document).ready(function(){ 
   //your code goes here 
});

Answer 4

2 Things:

1- Usualy, javascript is placed at the top of the page. If you do this in the future, you'll need to need to enclose it in the jQuery equivalent of document.ready:

 $(function() {
//  do stuff
 });

This tells jQuery to run the function as soon as the document is ready.

2- For any value between two opening/closing tags, you need to use the jQuery method .html("enter text to change") while the .val() method is used to change the value of any control with the attribute value="" like inputs:

<input type="submit value="This will be changed with val()" />

The following should work fine. Note its wrapped in $(function() { }); and is using the .html() property and is placed at the top of the page.

<script type="text/javascript">
$(function(){
    $("#mixui_title").html("very happy cow");
});
</script>

<span id="mixui_title">Angry cow sound?</span>