jQuery: on click, update div with text

JavaScript
1

I know this can be done with (1) ajax and also (2) hide/show div’s.

I have three links and I want to update the text inside a div when each link is clicked. I thought I was doing this right…


<script type="text/javascript" src="include/jquery-ui-1.8/js/jquery-1.4.2.min.js"></script>

<script type="text/javascript">
	
	$(function() {
		
		// default text
		$("#welcomebox").text("Welcome!");
		
		// text if first link is clicked		
		$("#cs1").click(function (){
			$("#welcomebox").text("Test 1");
		});
		
		// text if second link is clicked
		$("#cs2").click(function (){
			$("#welcomebox").text("Test 2");
		});
		
		// text if third link is clicked
		$("#cs3").click(function (){
			$("#welcomebox").text("Test 3");
		});
		
	});
</script>


<a id="#cs1">One</a> | <a id="#cs2">Two</a> | <a id="#cs3">Three</a>

<div id="welcomebox" style="width: 400px;"></div>
2

Take a second look at the id attribute on each HTML element.

3 
<a id="cs1" href="#">One</a> | <a id="cs2" href="#">Two</a> | <a id="cs3" href="#">Three</a>

You had a hash tag in your id. I also added href that’s person style makes the browser recognize the link. you can change your click function to look like this


$("#cs1").click(function (e){
    e.preventDefault();
    $("#welcomebox").text("Test 1");
});

and will stop the link from firing but will change the text as desired.

4

ahh thank you gents :slight_smile: