angeklicktes Element speichern

[syuam]

hey Leute,
hier meine Ausgabe:

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

und mein javscript-Code dazu:

<script>
markedImage = 0; 
function unmarkAll() {
document.getElementById(' . $id . ').style.borderColor = "#000000";
document.getElementById(' . $id . ').style.borderColor = "#000000";
document.getElementById(' . $id . ').style.borderColor = "#000000";
document.getElementById(' . $id . ').style.borderColor = "#000000";
}
function changeColor(obj, markedId) {
unmarkAll();
obj.style.borderColor  ="#00FF00";
markedImage = markedId;
}
</script>
<script>
function weiter()
{
    document.getElementById("markedImage").value = markedImage;
}
</script>

Nun sollte das angeklickte Element doch markiert werden mit der angegeben Farbe --> wird es nicht.
Außerdem sollte die "id" des angeklickten Elements in das input-hidden Feld geschrieben werden --> wird es auch nicht.
Was muss ich korrigieren?
L

 

[Tronjer]

Du könntest erst einmal die PHP-Variablen mit Tags und echo ausstatten, damit die Bilder angezeigt werden. Dann macht es wenig Sinn, für vier HTML-Elemente vier Eventlistener zu schreiben, die eine Funktion aufrufen, in der vier Mal das selbe steht. Last not least besitzen Bilder keinen value, und außerdem gibt es keine Punktverknüpfung in JavaScript. Als allererstes würde ich aber Firebug installieren und mal einen Blick in die Konsole und den Dom-Inspector werfen.

 

[syuam]

Abgeändert:
hier der Ursprung von $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"];
             $product_name = $row["product_name"];
        }

    } else {
        echo "That item does not exist.";
        exit();
    }

Der js-Code :

<script>
markedImage = 0;
function unmarkAll() {
document.getElementById(img' . $id . ').style.borderColor = "#000000";
document.getElementById(img' . $id . ').style.borderColor = "#000000";
document.getElementById(img' . $id . ').style.borderColor = "#000000";
document.getElementById(img' . $id . ').style.borderColor = "#000000";
}
function changeColor(obj, markedId) {
unmarkAll();
obj.style.borderColor  ="#00FF00";
markedImage = markedId;
}
function weiter()
{
    document.getElementById("markedImage").value = markedImage;
}
</script>

und die Aushabe:

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

Bleibt gleich...
Wenn ich ein Bild anklicke, bleibt es nicht markiert, wieso?
kann mir da jemand helfen?

lg

 

[threadi]

In deinem letzten Codeschnippsel fügst Du immer den Inhalt der Variable $id ein. Also hast Du 4 identische img-Elemente in der Ausgabe im Browser. Schau dir genau diese Ausgabe mal an, dann solltest Du dieses Problem auch erkennen,

 

[syuam]

ja stimmt. hast recht threadi. und wie soll ich die nun von einander differenzieren`?, kann ich da überhaupt noch bei document.getElementByTagName bleiben?, weil es geht mir einfach nur darum, dass das angeklickte Bild markiert wird und der "path" des angeklickten Bildes in das input-hidden-Feld geschrieben wird. Ich will den path nämlich als Variable abspeichern, damit ich damit dann weiterarbeiten kann.
lg und danke

 

[syuam]

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)
{
    //Wie speichere ich jetzt den "path" des markierten Bildes in eines Variablen??
}

<img src="<?php echo $path; ?>" onclick="changecolor(this);" />
<img src="<?php echo $path; ?>" onclick="changecolor(this);" />

So, nun muss ich nur noch den "path" des markierten Bildes (also die Variable $path) in einer anderen Variable von javascript abspeichern und diese in das input-hidden-Feld schreiben, wie stelle ich das an?
grüße!

 

[threadi]

Sehr allgemeines Beispiel:

inputfeld.value = neuerwert;