javascript - 如何通过onclick获取图像路径并将其保存在变量中

Question

这是我的html：

<form action="submitPage.php" method="post" onsubmit="savePathInVar();"> 
  <table>
  <tr>
    <td><img id="' . $id . '" src="inventory_images/' . $id . '.jpg" onclick="changecolor();" /></td>
    <td><img id="' . $id . '" src="inventory_images/' . $id . '.jpg" onclick="changecolor();" /></td>
  </tr>
    <input type="hidden" value="ClickedImaged" />
    <input type="submit" value="Submit" />          
  </table>
</form>

现在我需要一个功能changeColor()来突出显示单击的图像..以及将savePathInVar()单击图像的路径保存在输入隐藏字段中的功能。谁能帮助我？ps：这是$id从哪里来的：

$sql = mysqli_query($mysqli, "SELECT * FROM products WHERE id='$id' LIMIT 1");
$productCount = mysqli_num_rows($sql); // count the output amount
if ($productCount > 0) {
    // get all the product details
    while($row = mysqli_fetch_array($sql)) {
         $id = $row["id"];
         $id = "img.$id";
                     blabla...

如果有人可以帮助我，那就太好了..我对javascript很陌生:)

---

OP将此添加到答案中。它属于问题

编辑：

我在做别人的作业吗

更新 3，我的整个代码：

<script>
function changecolor(img)
{
var images = document.getElementsByTagName("img");
for(var i=0,j=images.length; i<j; i++)
{
    images[i].style.borderColor="#000";
}
img.style.borderColor="#F00";
//Operate on img location as before
savePathInVar(img.src);
}
function savePathInVar(ImgLocation)
{
var form = document.createElement("form");
var inp = document.createElement("input");
inp.name="imgSrc";
inp.value=ImgLocation;
form.appendChild(inp);
form.method="post";
form.submit();//this will refresh the page
}
</script>

<form name="form_name" action="submitPage.php" method="POST" onsubmit="savePathInVar();">
<table>
  <tr>
    <td><img src="<?php echo $path; ?>" onclick="changecolor(this);" /></td>
    <td><img src="<?php echo $path; ?>" onclick="changecolor(this);" /></td>
  </tr>
  <input type="submit" value="Submit" />
</table>
</form>

我的 submitPage.php ：

<?php
error_reporting (E_ALL | E_STRICT);
ini_set ('display_errors' , 1);
$imgSrc = $_POST['imgSrc'];
echo $imgSrc;
?>

当我标记图像并单击“提交”时，我得到：

注意：未定义索引：第 5 行 /srv/disk8/13​​91019/www/myfirststore.eu.pn/submitPage.php 中的 imgSrc

我需要做什么 ？？问候并感谢您的帮助。

Answer 1

更改onclick="changecolor();"为onclick="changecolor(this);"

function changecolor(img)
{
    savePathInVar(img.src);
}
function savePathInVar(ImgLocation)
{
    //Do what you want with ImgLocation

}

更新

要取消突出显示除一个 img 之外的所有图像：

function changecolor(img)
{
    var images = document.getElementsByTagName("img");
    for(var i=0,j=images.length; i<j; i++)
    {
        images[i].style.borderColor="#000";
    }
    img.style.borderColor="#F00";
    //Operate on img location as before
    savePathInVar(img.src);
}

更新 2

要将图像 src 提交到 php，请创建一个表单并发布它：

function savePathInVar(ImgLocation)
{
    var form = document.createElement("form");
    var inp = document.createElement("input");
    inp.name="imgSrc";
    inp.value=ImgLocation;
    form.appendChild(inp);
    form.method="post";
    form.submit();//this will refresh the page
}

在 php 中：

$imgSrc = $_POST['imgSrc'];