Javascript if / else onclick?

Question

The onclick dialog displays the following div. How can I make it display another message in the "content" div depending on the click. I already have javascript to display divs Test1 and Test2. I just wanted to add the ability to add a message to the "content" div. Sorry for the confusion.

<a href="" onclick="showThis('test1');return false;">Test 1</a>
<div class="test1"> <p>some content</p> </div>

<a href="" onclick="showThis('test2');return false;">Test 2</a>
<div class="test2"> <p>some content</p> </div>


<div id="content">  

<!-- if clicked on Test 1, display some message. And if clicked on Test 2, display some other message -->

</div>

Answer 1

First change:

<div class="content>

to

<div id="content">

then (without using a library like jQuery):

var showThis = function(caller){
    switch(caller){
        case "test1":
            document.getElementById("content").innerHTML = "Your content here";
            break;
        case "test2":
            document.getElementById("content").innerHTML = "Your other message";
            break;
        default:
            break; // here just in case you need it
    }
}

Answer 2

. - . :

<a href="" id="test1">Test 1</a>
<div class="test1"> <p>some content</p> </div>

<a href="" id="test2">Test 2</a>
<div class="test1"> <p>some content</p> </div>

<div class="content">  
<!-- if clicked on Test 1, display some message. And if clicked on Test 2, display some other message -->
</div>

:

document.getElementById('test1').onclick = handleClick;
document.getElementById('test2').onclick = handleClick;

function handleClick(e)
{
    var sender = (e && e.target) || (window.event && window.event.srcElement);
    if(sender.id == "test1")
    {
        showContent('message 1');
    }
    else if(sender.id == "test2")
    {
        showContent('message 2');
    }
    if(window.event)
    {
        window.event.returnValue = false;
    }
    return false;
}

function showContent(msg)
{
    document.getElementById('content').innerHTML = msg;
}

Answer 3

, <div>, Javascript.

<a href="" onclick="showThis('test1');return false;">Test 1</a>
<div id="test1"> <p>some content</p> </div>

<a href="" onclick="showThis('test2');return false;">Test 2</a>
<div id="test1"> <p>some content</p> </div>

<div id="content">  
  <!-- if clicked on Test 1, display some message. 
      And if clicked on Test 2, display some other message -->
</div>

, test1 test2 , style="display: none;" id="" <div>.

---

, test1 test2 div content. , :

function showThis(id) {
  document.getElementById('content').innerHTML = document.getElementById(id).innerHTML;
}

Answer 4

jQuery, :

<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
function showThis(x) {
  $("#content").html(  $("#"+x).html());
}
</script>

<a href="#" onclick="showThis('test1');">Test 1</a>
<div id="test1" style="display:none;"> <p>some content #1</p> </div>

<a href="#" onclick="showThis('test2');">Test 2</a>
<div id="test2" style="display:none;"> <p>some content #2</p> </div>


<div id="content">
<!-- if clicked on Test 1, display some message. And if clicked on Test 2, display some other message -->
</div>

, , . showThis HTML id'd div, , div. , !

Answer 5

HTML:

<div class="msg" id="test_1" onclick="showThis('test_1');return false;>message</div>
<div class="msg" id="test_2" onclick="showThis('test_2');return false;>message 2</div>

CSS

div.msg{ display: none;}

JS:

showThis(param){
    document.getElementById(param).style.display = 'block';  //or equivalent framework call
}

javascript.

Answer 6

, " " "p" "onclick".

w3schools , : http://www.w3schools.com/htmldom/prop_anchor_innerhtml.asp

Answer 7

showDiv() - , .

    var message="";
    if(whatever_variable_has_the_argument = "test1")
    {
       message="message for test1"
    }
    else if(whatever_variable_has_the_argument = "test2")
    {
      message="message for test2"
    }
        document.getElementById("content")=message;
// assuming you added the id as "content" too for the content div.