Multiple JavaScript OnClick events with multiple values in one target

Question

I have added a JavaScript onclick attribute to an HTML DIV tag.

I am using multiple onclick attributes in a single DIV tag. Each onclick contains various tags.

What I want is when I click one onclick tag it should display its very own tag in the DIV tag.

And when I click another onclick tag it should display its tag in the same tag but it should clear the previous value.

HTML:

<div id="mobi"  style="display:none;" class="answer_list" > <a href="main.php">mobile</a></div>
    <div id="elec"  style="display:none;" class="answer_list" > <a href="main.php">electric</a></div>
    <div id="vehi"  style="display:none;" class="answer_list" > <a href="main.php">vehicles</a></div>
    <div id="home"  style="display:none;" class="answer_list" > <a href="main.php">home</a></div>
    <div id="pets"  style="display:none;" class="answer_list" > <a href="main.php">pets</a></div>
    <div id="book"  style="display:none;" class="answer_list" > <a href="main.php">book</a></div>
    <div id="main">
        <p name="answer" value="Show Div" onclick="mob()" >Mobile</p>
        <p name="answer" value="Show Div" onclick="ele()" >Electronics</p>
        <p name="answer" value="Show Div" onclick="veh()" >Vehicle</p>
        <p name="answer" value="Show Div" onclick="hme()" >Home &  Furniture</p>
        <p name="answer" value="Show Div" onclick="pet()" >Pets</p>
        <p name="answer" value="Show Div" onclick="boo()" >Books CD & Hobbies</p>
    </div>

JavaScript:

function mob() {
    document.getElementById('mobi').style.display = "block";
}
function ele() {
    document.getElementById('elec').style.display = "block";
}
function veh() {
    document.getElementById('vehi').style.display = "block";
}
function hme() {
    document.getElementById('home').style.display = "block";
}
function pet() {
    document.getElementById('pets').style.display = "block";
}
function boo() {
    document.getElementById('book').style.display = "block";
}

but everything works fine but when i click on second on click it creates new tag i need to display in same tag — user3989354
– user3989354, Commented Aug 29, 2014 at 7:45
Please edit the post to remove the statement about using "JAVA". There's no Java here. — chiastic-security
– chiastic-security, Commented Aug 29, 2014 at 7:47

user2846400 · Accepted Answer · 2014-08-29 07:50:17Z

function mob() {
            first();
            document.getElementById('mobi').style.display = "block";
        }
        function ele() {
            first();
            document.getElementById('elec').style.display = "block";
        }
        function veh() {
            first();
            document.getElementById('vehi').style.display = "block";
        }
        function hme() {
            first();
            document.getElementById('home').style.display = "block";
        }
        function pet() {
            first();
            document.getElementById('pets').style.display = "block";
        }
        function boo() {
            first();
            document.getElementById('book').style.display = "block";
        }

 function first(){
   document.getElementById('mobi').style.display = "none";
   document.getElementById('elec').style.display = "none";
   document.getElementById('vehi').style.display = "none";
   document.getElementById('home').style.display = "none";
   document.getElementById('pets').style.display = "none";
   document.getElementById('book').style.display = "none";
}

Collectives™ on Stack Overflow

Multiple JavaScript OnClick events with multiple values in one target

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related