Javascript weird bug

This is a small gist of what I’m currently working on. It runs a loop through an array and posts a bunch of images, of guitar chord charts. When you click on them, it plays a low bitrate ‘.ogg’ recording of the chord.

var cP = file/dir/;

var CmajChords ["cmaj", "dmin", "emin"]; //etc... x10 or 20 different chords in that key.
var aCh = [];

function dothisthing(){
    var selectedKey = document.getElementById("keys").value;
    if (selectedKey === "cmajor"){aCh = CmajChords;}
      $('#chartsbox').empty(); //delete any old images

      //cycle the array,
      var chartLength = aCh.length;
      for (var i = 0; i < chartLength; i++){
        var chart = document.createElement("img");
        chart.setAttribute("src", cP + aCh[i] + ".jpg");
        chart.setAttribute("alt", aCh[i]);
        chart.setAttribute("class", "chart");
        chart.setAttribute("onload", "play_" + aCh[i] + ".load()");
        chart.setAttribute("onclick","play_" + aCh[i] + ".play()");
        document.getElementById("chartsbox").appendChild(chart);
      }
    }
}

This code works, but whats weird is sometimes some of the charts don’t load. When I inspect the DOM element the ones that work look like this:

<img src="images/charts/cmaj.jpg" alt="cmaj" class="chart" onload="play_cmaj.load()" onclick="play_cmaj.play()">

Usually the first or second time I load the page, one or two will end up as the alt, no image and no sound, inspect looks like this:

<img src="images/charts/dmin6.jpg" alt="dmin" class="chart" onload="play_dmin.load()" onclick="play_dmin.play()"> == $0

reloading the page seems to fix it, or not… it’s kind of random. This only happens when I’m running the site from my server. If I run it from the local files there is 0 problems.

Any clue why this might be happening? The only differnce is the seams to be the “==$0” and I have no idea where that came from…

Hi,

The  == $0  is a Chrome (maybe other browsers too) thingy. If you select an element in the inspector, then that text appears after the element. Now (as long as the node is selected) you can use $0 in your JS console to refer to that element. It has not anything to do with code that is failing or not working.

As for your code - I don’t really understand  what  it is that is not working. However, it doesn’t feel really good that you are using the  onload  and  onclick attributes to forge function names with strings. You should find a better solution for that. But clarifying what exactly isn’t working will help other people here help you.

Thanks!

I believe the problem has resolved itself. I had literally just freshly uploaded everything to the server. Considering the ==$0 appears to have nothing to do with the bug, the code was 100% working as intended. I think the problem was with the server.

So the new question is, if it’s clunky to build my function names inside a loop, how do I get around writing 200 unique event listeners? It seams like that might be a drag on my load time.

I would definitely suggest using event listeners instead of onclick attributes. So just use:

chart.addEventListener('click', function(){//whatever})

Then, you could store your functions in an object (https://stackoverflow.com/questions/3733580/javascript-variable-in-function-name-possible), so you can use the variable you now use to call the function.

1 Like