How to use same onclick function multiple times in php page?

Question

I make a .php page which retrieves data from mysql and display it on that .php page each record one by one simple. but the actual problem is when i am clicks links it shows that div and vice versa but, only works on row 1. i know onclick function is unique so, it will calls once. So, i used .querySelector() instead .getElementById(). because whole content inside while loop is comes from database so, id is not works their.Ok,finally comes to the point how, I call same onclick function for both introduction and for features link (for row 1 and for row 2).("searched to much for solution but nothing happens")

My javascript code :

<head>
 <script>
  function ShowIntroduction() 
  {
    document.querySelector(".IntroductionDiv").style.display = 'block';
    document.querySelector(".FeaturesDiv").style.display = 'none';
  }
  function ShowFeatures() 
  {
    document.querySelector(".IntroductionDiv").style.display = 'none';
    document.querySelector(".FeaturesDiv").style.display = 'block';
  }
 </script>
</head>

My php code :

<body>
  <?php
   error_reporting(E_ALL ^ E_DEPRECATED);
   ob_start();
   define('DB_SERVER', 'localhost');
   define('DB_USERNAME', 'root');
   define('DB_PASSWORD', '');
   define('DB_DATABASE', 'sldb');
    $connection = mysql_connect(DB_SERVER, DB_USERNAME, DB_PASSWORD) or die(mysql_error());
    $database = mysql_select_db(DB_DATABASE) or die(mysql_error());
    $select=mysql_query("SELECT * FROM products_page");
    $num = mysql_num_rows($select);

while($userrow=mysql_fetch_array($select))
{
  $id=$userrow['id'];     
  $userintroduction=$userrow['introduction'];
  $userfeatures=$userrow['features'];

echo '
  <div class="MainOuterDiv" style="border:1px solid transparent;">
    <div class="DetailsCircleBtnDiv" >
        <a href="#" onClick="ShowIntroduction();"> Introduction </a>
        <a href="#" onClick="ShowFeatures();" style="margin-left:10px"> Features </a>
    </div> <!--- End of DetailsCircleBtnDiv ----->
    </br>

    <div class="DetailsTextDiv">
        <div class="FeaturesDiv" style="border:1px solid black;">
            <p class="Products-Features-P" >'.$userfeatures.'</p>
        </div></br>
        <div class="IntroductionDiv" style="border:1px solid black;">
            <p id="demo" class="Products-Introductio-P" >'.$userintroduction.'</p>
        </div></br>
    </div> <!--- End of DetailsTextDiv ----->
   </div> <!--- End of MainOuterDiv ----->
   </br>';
}
?>

</body>

When I click on row 1's introduction/Features link works fine but, when use row 2nd's introduction/features link it works for row 1's introduction div and for features div.

So you need to look at the row you are in and select the class from that row. — epascarello
– epascarello, Commented Jul 29, 2016 at 13:05
Simply i want to show same div on same link click. But, how ? Any solutions please. ! — John120
– John120, Commented Jul 29, 2016 at 13:06
If I guess it right, you want to show "introduction" and hide "features" when you clic on an item. And vice versa. Is that right ? — r4phG
– r4phG, Commented Jul 29, 2016 at 13:12
But unable to use id here so i am using classes @JeffreyTroost you have any demo,code please its helpful for me. — John120
– John120, Commented Jul 29, 2016 at 13:12

epascarello · Accepted Answer · 2016-07-29 13:31:15Z

3

inline events are a bad idea, just use jQuery since you have it listed

Add class to the anchor

<a href="#" class="anchorShow"> Introduction </a>

listen for the click

$( function () {  //wait for document to be ready
    $(".anchorShow").on("click", function (evt) {  //bind the click event to the anchors
        evt.preventDefault();  //stop click
        var anchor = $(this);  //link that was clicked
        var wrapper = anchor.closest(".MainOuterDiv");  //parent element that wraps content
        wrapper.find(".IntroductionDiv").show();  //show intro
        wrapper.find(".FeaturesDiv").hide();      //hide features
    });
});

edited Jul 29, 2016 at 13:31

answered Jul 29, 2016 at 13:11

epascarello

208k20 gold badges206 silver badges246 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

John120 Over a year ago

Yes i try your code but on link click nothing happanes ! why ?

epascarello Over a year ago

Did you bind it on document ready? I updated it to include document ready

John120 Over a year ago

Its also works like a charm thank @epascarello. but i am little bit confused which solution is good.

epascarello Over a year ago

I am not a fan of ids, but if you want a lot of ids, you can easily generate them and stick them all over your document.

k102 · Accepted Answer · 2016-07-29 13:11:24Z

0

Well, looks ugly, but should work

  function ShowFeatures(evt) 
  {
    evt.target.parentNode.parentNode.querySelector(".IntroductionDiv")...

answered Jul 29, 2016 at 13:11

k102

8,1099 gold badges52 silver badges72 bronze badges

1 Comment

John120 Over a year ago

its full code or something i don't understand this !

Yosvel Quintero · Accepted Answer · 2016-07-30 13:13:40Z

You can point your Document.querySelector() to a unique class name thanks to the $userrow['id']:

JavaScript:

function ShowIntroduction(id) {
    document.querySelector('.IntroductionDiv' + id).style.display = 'block';
    document.querySelector('.FeaturesDiv' + id).style.display = 'none';
}

function ShowFeatures(id) {
    document.querySelector('.IntroductionDiv' + id).style.display = 'none';
    document.querySelector('.FeaturesDiv' + id).style.display = 'block';
}

PHP:

<?php while($userrow=mysql_fetch_array($select)) : ?>
    <div class="MainOuterDiv" style="border:1px solid transparent;">
        <div class="DetailsCircleBtnDiv" >
            <a href="#" onClick="ShowIntroduction(<?php echo $userrow['id'] ?>);"> Introduction </a>
            <a href="#" onClick="ShowFeatures(<?php echo $userrow['id'] ?>);" style="margin-left:10px"> Features </a>
        </div> <!--- End of DetailsCircleBtnDiv -->
        </br>

        <div class="DetailsTextDiv">
            <div class="FeaturesDiv<?php echo $userrow['id'] ?>" style="border:1px solid black;">
                <p class="Products-Features-P" ><?php echo $userrow['features'] ?></p>
            </div></br>
            <div class="IntroductionDiv<?php echo $userrow['id'] ?>" style="border:1px solid black;">
                <p id="demo" class="Products-Introductio-P" ><?php echo $userrow['introduction'] ?></p>
            </div></br>
        </div> <!--- End of DetailsTextDiv -->
    </div> <!--- End of MainOuterDiv -->
    </br>
<?php endwhile; ?>

Great its works because of "$id" is always unique and it identify onclick event always differently. Thanks @YosvelQuintero

Collectives™ on Stack Overflow

How to use same onclick function multiple times in php page?

3 Answers 3

4 Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related