John120 John120 - 4 months ago 19
MySQL Question

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

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


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.

Answer

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; ?>
Comments