Question

I’m just wondering how i could make this code more efficient. I feel like there is a lot of code here to accomplish a simple task. But i’m not sure how to better it? Is there a way to dynamically create divs? Or is tehre a way to reduce the number of “getElementById” calls i make?

Answer 1

There are a number of improvements you might make, whether it’s in terms of speed, readability, or maintainability. Here’s a list of some off the top of my head:

1. Cache the note element in a variable if you’re going to reuse it. This makes your code faster since you don’t have to grab the element again to use it.

   var noteDiv = document.getElementById("A");
   noteDiv.note = notes[9];
   noteDiv.onmouseover = displayIt;
   

2. Instead of repeating your code so much, you could iterate over something that keeps track of your notes. In this example I am using an array of ids and an object containing the ids and notes as property-value pairs.

   var noteDivs = ["Middle", "D", "E", "F", ... ]
   // note that the order you put notes in here does not matter
   var notes = { Middle: "Middle C",
                 D: "D",
                 E: "E",
                 F: "F",
                 ... }
   function MakingNoise () {
       for (var i = 0; i < noteDivs.length ; i++) {
           document.getElementById(noteDivs[i]).note = notes[noteDivs[i]];
           document.getElementById(noteDivs[i]).onmouseover = displayIt;
       }
   }
   

3. The box element can be cached as well through a global variable. Might not be good style, but this should be faster than getting it from the DOM each time.

   var screen=document.getElementById("box"); 
   function displayIt() {
       if (this.note && screen) {
           screen.innerHTML += note + "  ";
       }
   } 
   

Putting everything together, you have the following:

var screen=document.getElementById("box"); 
var noteDivs = ["Middle", "D", "E", "F", ... ]
var notes = { Middle: "Middle C",
              D: "D",
              E: "E",
              F: "F",
              ... }

function MakingNoise () {
    for (var i = 0; i < noteDivs.length ; i++) {
        var noteDiv = document.getElementById(noteDivs[i]);
        noteDiv.note = notes[noteDivs[i]];
        noteDiv.onmouseover = displayIt;
    }
}
function displayIt() {
    if (this.note && screen) {
        screen.innerHTML += note + "  ";
    }
} 

It might even be better to keep your notes array instead of using the notes object I have above, as long as you make sure the order is the same as the noteDivs array. It will be faster, but also slightly more work to maintain. You would also need to have one div for each element in notes, which you currently don’t have.