В вашем методе validate() вы создаете две переменные с именами eyeColor и skinTone, никогда не устанавливая их значений, также ваши два оператора if проверяют, имеют ли переменные значение, которого у них нет, таким образом innerHTML никогда не будетбыть пораженным.
Вам также необходимо создать элемент, в который должно быть помещено сообщение, поскольку вы собираетесь перезаписать все дочерние элементы.
Например, создайте элемент метки передКнопка отправки.
<label id="error"></label>
Вы должны создать две глобальные переменные и установить их как пустую строку.
var eyeColor = '';
var skinTone = '';
Вам не хватает идентификатора для второго выпадающего меню.Добавьте id="skinTone" к элементу div.
Удалите две функции onchange, так как они не будут работать с элементами <div>: selectMenu1() и selectMenu2().Однако создайте дополнительную функцию, которая устанавливает значение для переменных eyeColor и skinTone.Для каждого элемента <a> в раскрывающихся меню установите href на href="javascript:setMenuValue(this)".
function setMenuValue(obj)
{
if (obj !== undefined)
{
if (obj.parentElement.id == 'eyeColor')
{
// Update the global variable eyeColor
eyeColor = obj.getAttribute('data');
}
else if (obj.parentElement.id == 'skinTone')
{
// Update the global variable skinTone
skinTone = obj.getAttribute('data');
}
}
}
Измените свой метод validate() следующим образом:
function validate() {
// Show error if the eyeColor or skinTone variables are still an empty string
if(eyeColor == ''){
document.getElementById("error").innerHTML = "Please select an eye color";
} else if (skinTone == ''){
document.getElementById("error").innerHTML = "Please select a skin tone";
}
}