Array [document.getElementById().value] not working
Hi, hello everyone this is my first post. I have exhausted manuals and tutorials and posts and I can't get this to work.
Hope somebody here can help me.
$prod_query = mysqli_query($con,"SELECT id, type, image_name, description FROM Products");
$products = array();
while($row = mysqli_fetch_array($prod_query))
$products = $row;
// then I create a dropdown list within a form.
echo "<select name='prodType' id='prodDrop' onchange='swapProd()'>";
echo "<option value='0'>Select one:</option>";
foreach ($products as $row)
echo "<option value='" . $row['id'] . "'>" . $row['type'] . "</option>";
var prodArrJS = <?php echo json_encode($products);?>
// and the function to display the image (on <img id="prodImage">) of the selected product from the dropdown list above
var image = document.getElementById("prodImage");
var dropd = document.getElementById("prodDrop");
image.src = "images/ex/" + prodArrJS[dropd.value] + ".jpg";
unset( $products );
The image at the end of the function is not displayed (nothing is displayed, not even the little question mark) and the function stops.
I have tested the array with numbers and strings and it works ok.
Thanks in advance.