Javascript if/else onclick?

Question

The following div's are displayed onclick. How can I make it display a different message in the div "content" depending onclick. I already have the javascript to display the div's Test1 and Test2. I just wanted to add the ability to also add a message to the div "content". 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 of all, you'll want to have IDs set on each <div> so you can get at them from 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>

If you don't want the test1 and test2 divs to be visible add style="display: none;" after the id="" part of each <div>.

---

Now I'm assuming that you want to take the contents of test1 or test2 and put those contents into the content div. Here's a little function that'll do it:

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

Answer 2

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
}

and it's recommended to use discrete javascript.

Answer 3

There's a dozen different ways to handle this. Most would require some minor changes to your markup - your current approach is not very robust and doesn't degrade very gracefully. This is just one possible way:

<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>

Assign the click handlers programmatically:

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 4

If I understand well, you want to change the 'some content' in the "p" element text when the "onclick" is called.

This example by w3schools should be what you need: http://www.w3schools.com/htmldom/prop%5Fanchor%5Finnerhtml.asp

Answer 5

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 6

At the bare minimum, go to your showDiv() function and add something that looks like this that would display a message.

    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.

Answer 7

If you're willing to import jQuery, you can simply do:

<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"&gt;&lt;/script&gt;
<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>

I tested this and it works as you describe. The showThis function grabs the HTML contents of whatever id'd div you pass it, and puts it in the content div. Hope that helps!