John Davidson

Message:

I am working with three.js and WebGL. I am currently trying to send references from the database to a custom javascript function to load a model but I am getting results undefined in the alert.
I am using a JavaScript file as a type module.

<script type="module" src="./script.js"></script>

here is my PHP & HTML code.

<div class="model-options">

   <?php

      $q_read=mysqli_query($dbc, "SELECT * FROM model");  

      while($row=mysqli_fetch_array($q_read))

      {

         echo "<div class='model1-img models'>";

         echo "<img src='".$row['model_img']."' onclick='load1model(".$row['model_link'].")'>";

         echo "</div>";

      }

   ?>

</div>

And here is my JavaScript code.

function load1model(model_value) {

   alert(model_value);

};

If you want to know something else then let me know.

---

My Answer:
To send multiple PHP variables to a custom JavaScript function as parameters in an external file of type module, you can use data attributes in your HTML elements and then access those attributes in your JavaScript function.

Here is an example of how you can modify your PHP & HTML code to send multiple variables to the JavaScript function:

html

$q_read=mysqli_query($dbc, "SELECT * FROM model");
while($row=mysqli_fetch_array($q_read))
{
echo "

";
echo "";
echo "

";
}
?>

And then in your JavaScript file, you can access these data attributes and pass them to your function:

javascript
function load1model(element) {
var modelLink = element.getAttribute('data-model-link');
var modelId = element.getAttribute('data-model-id');

alert("Model Link: " + modelLink + ", Model ID: " + modelId);
};


By using data attributes, you can pass multiple variables from PHP to your JavaScript function in an external file of type module.