patturik patturik - 4 days ago 4
Javascript Question

Using multiple images in imgArray

I'm not experienced at all at coding. I'm currently developing a webapp. I hired programmers to do this for me, but I can't help to try a few things myself (just because I'm so curious).
I work of an open source Audio app. The thing I'm trying to do is : for every music track that is being created, I want to have a different image as a mute button.

I now have this :

var imgArray = [];

var i=trackNumber;
for(var i = 0; i < 4; i++)
{
imgArray.push(new Image());
imgArray[imgArray.length - 1].src = 'img/img' + i + '.png';
}

function show_image(src) {
var img = document.createElement("img");
img.src = imgArray[i];


// This next line will just add it to the <body> tag
document.body.appendChild(img);
}

// Render HTML


var span = document.createElement('tr');
span.innerHTML = '<td class="trackBox" style="height : ' + "120px;" + 'px">' +
"<progress class='pisteProgress' id='progress" + trackNumber + "' value='0' max='100' style='width : " + SAMPLE_HEIGHT + "px' ></progress>" +
instrument.name + '<div style="float : right;">' +
"<button class='mute' id='mute" + trackNumber + "' onclick='muteUnmuteTrack(" + trackNumber + "<img src='imgArray[i]'" + "</button>" ; +
"<button class='solo' id='solo" + trackNumber + "' onclick='soloNosoloTrack(" + trackNumber + ");'><img src='../img/noearphones.png' /></button></div>" +
"<span id='volspan'><input type='range' class = 'volumeSlider custom' id='volume" + trackNumber + "' min='0' max = '100' value='100' oninput='setVolumeOfTrackDependingOnSliderValue(" + trackNumber + ");'/></span><td>";

divTrack.appendChild(span);


So every trackNumber should correspond with a different image. That's the idea. I made this work by doing something like
if (trackNumber == 0 )
and then a whole new render HTML element for each track. But there should be a shortcut, right? With the code I have now no images show up at all.

Thank you so much for helping in advance. Again I'm sorry that I'm an absolute beginner in coding.

Answer

You have serious concatenation mistakes on this line:

"<button class='mute' id='mute" + trackNumber + "' 
         onclick='muteUnmuteTrack(" + trackNumber + "<img src='imgArray[i]'" + "</button>" ; +

Change it with this:

"<button class='mute' id='mute" + trackNumber + "' 
         onclick='muteUnmuteTrack(" + trackNumber + ");'><img src='"+imgArray[i]+"'/></button>" ; +

And it will work.

Edition:

The problem of the undefined image is because you are overriding i variable in the for() loop statement. You need to move that assignment to after the loop. The following is the complete code:

var imgArray = [];

for(var i = 0; i < 4; i++) 
{
     imgArray.push('img/img' + i + '.png');
}

var i=trackNumber; // I move to this zone this line to avoid overriding

function show_image(src) {
    var img = document.createElement("img");
    img.src = imgArray[i];


    // This next line will just add it to the <body> tag
    document.body.appendChild(img);
}

// Render HTML

var span = document.createElement('tr');
span.innerHTML = '<td class="trackBox" style="height : ' + "120px;" + 'px">' +
    "<progress class='pisteProgress' id='progress" + trackNumber + "' value='0' max='100' style='width : " + SAMPLE_HEIGHT + "px' ></progress>" +
    instrument.name + '<div style="float : right;">' +
    "<button class='mute' id='mute" + trackNumber + "' onclick='muteUnmuteTrack(" + trackNumber + ");'><img src='"+imgArray[i]+"' /></button>" ; +
    "<button class='solo' id='solo" + trackNumber + "' onclick='soloNosoloTrack(" + trackNumber + ");'><img src='../img/noearphones.png' /></button></div>" +
    "<span id='volspan'><input type='range' class = 'volumeSlider custom' id='volume" + trackNumber + "' min='0' max = '100' value='100' oninput='setVolumeOfTrackDependingOnSliderValue(" + trackNumber + ");'/></span><td>"; 

divTrack.appendChild(span); 
Comments