onClick Event Handler in Verbindung mit setAttribute()

[Bernd]

Hallo zusammen,

Ich stehe vor einem kleinen Problem:

  
var PfadListe = new Array();  
PfadListe[0] = "C:\\Musik\\track1.mp3";  
PfadListe[1] = "C:\\Musik\\track2.mp3";  
PfadListe[2] = "C:\\Musik\\track3.mp3";  

Zunächst habe ich ein Array erstellt mit src-Angaben.

  
<input type="button" onClick="arrayAuslesen()" value="Array Auslesen">  
<div id="ArrayAuslesenBereich" style="display:none;"></div>  

Dann habe ich einen Button und einen Div-Bereich erstellt.

  
function arrayAuslesen ()  
{  
var elem = document.getElementById('ArrayAuslesenBereich');  
  
if (elem.style.display == "none")  
  {  
  elem.style.display = "block";  
  
  for (var i = 0; i < PfadListe.length; i++)  
    {  
    var linkPfad = PfadListe[i];  
  
    var link = document.createElement("a");  
    link.innerHTML = linkPfad;  
    link.setAttribute("onClick", "    ???    ");  
    elem.appendChild(link);  
  
    elem.appendChild(document.createElement("br"));  
    }  
  }  
 else  
  {  
  elem.style.display = "none";  
  }  
}  

So, hier ist der Javascript Code der ausgeführt wird, wenn auf den Button geklickt wird.

  
<audio controls  id="AudioPlayer">  
  <source src="C:\Musik\track1.mp3" type="audio/mpeg" />  
</audio>  

Das "Herzstück" dieser Seite ist der Audio Player.

Der Teil, um den es hier eigentlich im Javascript geht, ist der, der mit den 3 '???' gekennzeichnet ist.
    link.setAttribute("onClick", " ??? ");
Ich habe schon so einiges versucht dort einzusetzen aber nichts will klappen...
    A'la: „"var Player = document.getElementById('AudioPlayer'); Player.src = linkPfad";“
Die Frage ist: Was muss ich dort reinschreiben, damit der Audio Player bei einem Klick auf einen dieser Links den Track wechselt?
Essenziell wichtig und zu beachten ist, dass es irgendwie auf
    var linkPfad = audioSrcListe[i];
diesen Teil des Scripts zugriff hat.. Ich weiß nicht ob das jetzt so ein großes Problem ist, da ich doch das Link-Element auch genau dort erschaffen habe...

Wär toll wenn mir jemand da helfen könnte.
Liebe Grüße
  Bernd

[Kai]

Hallo,

und wie ist es mit dieser Lösung?

<audio controls  id="AudioPlayer">  
  <source src="file://C:/Musik/track1.mp3" type="audio/mpeg">  
</audio>

[ChrisB]

Hi,

Ich stehe vor einem kleinen Problem:

Dir scheint Grundlagenwissen zu fehlen.
Fang hier an: http://molily.de/js/event-handling-grundlagen.html

MfG ChrisB

[Bernd]

function arrayAuslesen ()
{
var elem = document.getElementById('ArrayAuslesenBereich');

if (elem.style.display == "none")
  {
  elem.style.display = "block";

for (var i = 0; i < PfadListe.length; i++)
    {
    var linkPfad = PfadListe[i];

var link = document.createElement("a");
    link.innerHTML = linkPfad;

// *******************************************************
    document.getElementById('AudioPlayer').src = PfadListe[i];
    link.onclick = document.getElementById('AudioPlayer').src;
    // *******************************************************

elem.appendChild(link);

elem.appendChild(document.createElement("br"));
    }
  }
}

Hallo zusammen,  
Ich habe meinen Code ein wenig verändert (siehe Sternchen).  
Folgendes passiert: Wenn ich die Seite neu lade und dann auf den Button klicke wird das Array ausgeschrieben - zwar nicht mit den typischen Link Eigenschaften wie Farbe, Unterstrichen und Curser: Pointer da das href Attribut nicht dabei ist ,aber das lässt sich ja per CSS nacharbiten - .  
Gleichzeitig wird aber das src-Attribut von meinem Audio Player auf die letzte sich im Array befindende Pfad Angabe gestellt (wenn ich den Button betätige).  
  Also schlussfolgere ich daraus, dass er das  
  `link.onclick = document.getElementById('AudioPlayer').src`{:.language-javascript}  
  nicht als onClick-Handler interpretiert...  oder was vermutet ihr was falsch ist?  
Es wird doch irgendeine simple Möglichkeit geben, wie ich bei jedem Durchlauf der for-Schleife ein <a ...> Tag erzeugen kann mit einem individuellen onClick-Event-Handler (Verweis auf PfadListe mit der Position i ( [i] ) ) ,der in dem Moment, wo auf den Link Text ( `link.innerHTML = linkPfad;`{:.language-javascript} ) geklickt wird, das src-Attribut des Players dementsprechend verändert.  
  
Ich bin mit meinem Latein am Ende...  
 auf eine gute Idee  
    Bernd

[Klawischnigg]

Hi there,

var link = document.createElement("a");
    link.innerHTML = linkPfad;

// *******************************************************
    document.getElementById('AudioPlayer').src = PfadListe[i];
    link.onclick = document.getElementById('AudioPlayer').src;
    // *******************************************************

  

>   Also schlussfolgere ich daraus, dass er das  
>   `link.onclick = document.getElementById('AudioPlayer').src`{:.language-javascript}  
>   nicht als onClick-Handler interpretiert...  oder was vermutet ihr was falsch ist?  
  
"link.onclick" erwartet eine Funktion.  "document.getElementById('AudioPlayer').src" ist aber keine Funktion sondern ein String, der eine Ressource beinhaltet.  
Ausserdem, warum lässt Du überhaupt Links erzeugen, wenn Du dann auf das onclick-Event wartest?