The joy of web development is cross-platform compliance, although at this point I give IE6 the middle finger. IE7 should be fairly simple to make a functional site for, no? During my endeavors of developing a cookbook content managed site, I came across a curious JavaScript error. A recipe has a list of ingredients, where there is a dropdown select box for defining the names. Some simple DOM-use allows me to dynamically add these dropdowns to the form as to not set a finite limit of ingredients allowed per recipe. Behold:
var ingredientList = document.getElementById('ingredient0'); var ingredientTable = document.getElementById('ingredients'); var row = document.createElement('tr'); var i; for(i = 0; document.getElementById('ingredient' + i) !== null; i++); ... var cellIngredient = document.createElement('td'); var ingredient = document.createElement('select'); ingredient.setAttribute('id', 'ingredient' + i); ingredient.setAttribute('name', 'ingredients'); ingredient.setAttribute('onchange', 'chooseIngredient(this, ' + i + ')'); ingredient.innerHTML = ingredientList.innerHTML; // IE7 says, 'fuck you' cellIngredient.appendChild(ingredient); row.appendChild(cellIngredient); ... ingredientTable.lastChild.appendChild(row);
Does this work in Firefox 2? Flawlessly. IE7? Empty select box. BUG: Internet Explorer Fails to Set the innerHTML Property of the Select Object. Notice the date: May 12, 2003. This bug has existed since Internet Explorer 5. Fix:
var cellIngredient = document.createElement('td'); cellIngredient.innerHTML = '<select id="ingredient' + i + '" name="ingredients" onchange="chooseIngredient(this, ' + i + ')">' + ingredientList.innerHTML + '</select>'; // var ingredient = document.createElement('select'); // ingredient.setAttribute('id', 'ingredient' + i); // ingredient.setAttribute('name', 'ingredients'); // ingredient.setAttribute('onchange', 'chooseIngredient(this, ' + i + ')'); // ingredient.innerHTML = ingredientList.innerHTML; // cellIngredient.appendChild(ingredient);
In summary, I am adding to the evidence of everything you already know.
