How can I create a JavaScript Variable with my php Variable in a While loop?
Question
I am making a web with information from a MySQL database and I want pictures to appear after clicking a buttom.
echo "<img align=\"left\"src=\"".$path[$y]."\" alt=\"error\">";
echo "<img align=\"right\"src=\"".$path_edit[$y]."\" alt=\"error\" id=\"$id[$y]\" style=\"visibility:hidden\">";
echo "_____________________________________";
echo "<script type=\"text/javascript\">";
echo "function showImage() {
document.getElementById(\"$id[$y]\").style.visibility=\"visible\";
}";
echo "</script>";
echo "<br><br>";
echo "<input type=\"button\" onclick=\"showImage();\" value=\"Show Picture\"/>";
echo "<p>";
I want the second image(The one with $PATH_edit[$y]) to appear after clicking in its buttom. (The buttom appears after each couple of images). I have all with echo because It's all in the loop and I want it all to display as many times as number of entrances the database has. I know I can not use the php variables in Javascript, I tried everything but I can't fix it. I am new with php, html and I have no idea ofJavaScript.
This is how it looks like without clicking the buttom I know I can put an id to the image but that will only work for the first one. This is how it looks like after clicking I have also tried this:
echo "function showImage() {
var id_id = \"$id[$y]\";
document.getElementById(id_id).style.visibility=\"visible\";
}";
This is the whole code:
<!DOCTYPE html>
<!--- basic page needs
================================================== -->
<meta charset="utf-8">
<title>Base de Datos ATLAS</title>
<meta name="Una gran base de datos de microscopía" content="">
<meta name="Pablo Cruz" content="">
<!-- mobile specific metas
================================================== -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<!-- CSS
================================================== -->
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/vendor.css">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="style.css">
<!-- script (I tried to put the function here, bu tit does not work either)
================================================== -->
<script src="js/modernizr.js"></script>
<!-- favicons
================================================== -->
<link rel="shortcut icon" href="logo.jpg" type="image/x-icon">
<link rel="icon" href="logo.jpg" type="image/x-icon">
<!-- preloader
================================================== -->
<div id="preloader">
<div id="loader" class="dots-fade">
<div></div>
<div></div>
<div></div>
</div>
</div>
<!-- header
================================================== -->
<header class="s-header header">
<div class="header__logo">
<a class="logo" href="index.html">
<img src="images/logo_sin.png" alt="Homepage" >
</a>
</div> <!-- end header__logo -->
</div> <!-- end header__search -->
<a class="header__toggle-menu" href="#0" title="Menu"><span>Menu</span></a>
<nav class="header__nav-wrap">
<h2 class="header__nav-heading h6">Navigate to</h2>
<ul class="header__nav">
<li class="current"><a href="index.html" title="">Inicio</a></li>
<li class="has-children">
<a href="#0" title="">Base de Datos</a>
<ul class="sub-menu">
<li><a href="base_de_datos.html">Microscopía Electrónica</a></li>
<li><a href="base_de_datos.html">Microscopía Óptica</a></li>
</ul>
</li>
<li class="has-children">
<a href="#0" title="">Almacén</a>
<ul class="sub-menu">
<li><a href="s_mitocondrias.html">Mitocondrias</a></li>
<li><a href="s_nucleo.html">Núcleo</a></li>
<li><a href="s_lisosoma.html">Lisosomas</a></li>
<li><a href="s_vesiculas.html">Vesículas</a></li>
<li><a href="s_golgi.html">Aparato de Golgi</a></li>
<li><a href="s_microtubulos.html">Microtubulos</a></li>
<li><a href="s_rer.html">Retículo Endosplamático Rugoso</a></li>
<!--
<ul class="sub-menu">
<li><a href="single-video.html">Video Post</a></li>
<li><a href="single-audio.html">Audio Post</a></li>
<li><a href="single-standard.html">Standard Post</a></li>
</ul>
-->
</ul>
</li>
<li><a href="https://www.usal.es/" target="_blank"title="">USAL</a></li>
<li><a href="contacto.html" title="">Contacto</a></li>
</ul> <!-- end header__nav -->
<a href="#0" title="Close Menu" class="header__overlay-close close-mobile-menu">Close</a>
</nav> <!-- end header__nav-wrap -->
</header> <!-- s-header -->
<!-- s-content
================================================== -->
<section class="s-content s-content--top-padding s-content--narrow">
<article class="row entry format-standard">
<div class="entry__header col-full">
<h1 class="entry__header-title display-1">
Galeria de Mitocondrias.
</h1>
</div>
<?PHP
require "connect.php";
$x=0;
$y=0;
$autosuma = 222;
$database = "tfg";
$db_found = mysqli_select_db($db_handle, $database);
if ($db_found) {
$SQL = "SELECT * FROM id_organulo WHERE mitocondria = 1";
$result = mysqli_query($db_handle, $SQL);
while ( $db_field = mysqli_fetch_assoc($result) ) {
$id[$x] = $db_field['id'];
$comentario[$x] = $db_field['comentario'];
$nombre_de_foto[$x] = $db_field['nombre_de_foto'];
$autor[$x] = $db_field['autor'];
$path[$x] = $db_field['PATH'];
$path_edit[$x] = $db_field['PATH_edit'];
$ruta_perfil_foto[$x] = $db_field['ruta_perfil_foto'];
$x = $x+1;
echo "<div class=\"col-full entry__main\">";
echo "<div class=\"entry__author\">";
echo "<img src=\"".$ruta_perfil_foto[$y]."\"alt=\"\">";
echo "<div class=\"entry__author-about\">";
echo "<h5 class=\"entry__author-name\">";
echo "<span>$autor[$y]</span>";
echo "<a href=\"0\">$nombre_de_foto[$y]</a>";
echo "</h5>";
echo "</div>";
echo "</div>";
echo "<br>";
echo "</div>"; // <!-- s-entry__main -->
echo "<center>";
echo "<img align=\"left\"src=\"".$path[$y]."\" alt=\"error\">";
echo "<img align=\"right\"src=\"".$path_edit[$y]."\" alt=\"error\" id=\"$id[$y]\" style=\"visibility:hidden\">";
echo "_____________________________________";
echo "<br><br>";
echo '<input type="button" onclick="showImage('.$id[$y].');" value="Show Picture"/>';
echo "<p>";
print $comentario[$y];
echo "</p>";
echo "</center>";
$y++;
}
}
else {
print "Database NOT Found ";
}
mysqli_close($db_handle);
?>
<script type=\"text/javascript\">
function showImage() {
var id = <?php echo (json_encode($id[$y])); ?>;
document.getElementById(id).style.visibility="visible";
}
</script>";
<div class="row pagination-wrap">
<div class="col-full">
<nav class="pgn" data-aos="fade-up">
<ul>
<li><a class="pgn__prev" href="s_mitocondrias_result_3.php">Prev</a></li>
<li><a class="pgn__num" href="s_mitocondrias_result_1.php">1</a></li>
<li><a class="pgn__num" href="s_mitocondrias_result_2.php">2</a></li>
<li><a class="pgn__num" href="s_mitocondrias_result_3.php">3</a></li>
<li><span class="pgn__num current">4</span></li>
>
</ul>
</nav>
<hr>
</div>
</div>
<p> <h5>Codigo de rotulación:</h5> </p>
M: Mitocondrias <br>
dM: Doble membrana <br>
cM: Cresta Mitocondrial <br>
R: Ribosomas <br>
N: Nucleo <br>
eu: Eucromatina <br>
Nu: Nucleolo <br>
Mtu: Microtúbulos <br>
Ec: Esterocilio <br>
</p>
</center>
<?php $y++; ?>
</article> <!-- end entry/article -->
Thank you in advance.
1 answers
solution1
0 ACCPTED 2020-02-23 16:36:40
first a little advice, separate php, javascript and html. Together it is difficult to read and maintain. Otherwise you create a function at each pass of the loop. It doesn't bother me that nothing works like that. Try it like this:
Send the id of your image as a parameter to the function. A single function, which will be after the loop .
function showImage(id) {
document.getElementById(id).style.visibility="visible";
}
and at each passage of the loop send to the function the id of the image like this:
<input type="button" onclick="showImage(\"$id[$y]\");" value="Show Picture">
Finally it will give something like that:
<?php
while(...){
echo '<img align="left" src="'.$path[$y].'" alt="error">';
echo '<img align="right" src="'.$path_edit[$y].'" alt="error" id="'.$id[$y].'" style="visibility:hidden">';
echo '_____________________________________';
echo '<br><br>';
echo '<input type="button" onclick="showImage('.$id[$y].');" value="Show Picture">';
echo '<p>';
}
?>
<script type="text/javascript">
function showImage(id) {
document.getElementById(id).style.visibility="visible";
}
</script>
Use ' for echo and not " when displaying html, it's more practical. Good luck for the future
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
how can I access the variable 'night' in from the while loop javascript
How can I use a PHP variable inside of my JavaScript?
How can i parse php variable to my javascript function result?
how can i use php codes in javascript file while php is including the javascript variable?
how to increment a javascript variable title that is within a php while loop
Why can I not set the value of a variable outside a JavaScript while loop?
How can I access a PHP variable in Javascript?
How can I use a php variable in javascript
How can I echo this PHP variable in JavaScript?
How can I pass a PHP variable to javascript?
Related Tags