CODEWITHSUNDEEP
javascript
Amy
Amy

Reputation:

Javascript if/else onclick?

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>

Upvotes: 3

Views: 15720

Answers (7)

Rex M
Rex M

Reputation: 144122

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

Upvotes: 5

compumike
compumike

Reputation: 218

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

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!

Upvotes: 1

Thiyagaraj
Thiyagaraj

Reputation: 3685

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.

Upvotes: 0

Justin Niessner
Justin Niessner

Reputation: 245429

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

Upvotes: 4

Nican
Nican

Reputation: 7935

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_anchor_innerhtml.asp

Upvotes: 0

erenon
erenon

Reputation: 19118

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.

Upvotes: 0

Mark Biek
Mark Biek

Reputation: 150779

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

Upvotes: 1

Related Questions