Получение идентификатора элемента clicked

Question

У меня есть следующий код, который позволяет мне изменять цвет и текст href при нажатии.

/* Changing the colour of the button upon clicked */ 
 
function changecolor(element) { 
 
    alert(element.target.id); 
 
    if (element.innerHTML == "Select") { 
 
    element.innerHTML = "Selected"; 
 
    element.style.backgroundColor = "#C0C0C0"; /*Grey*/ 
 
    element.style.borderColor = "#C0C0C0"; 
 
    alert(element); 
 
    } else { 
 
    element.innerHTML = "Select"; 
 
    element.style.backgroundColor = "#FED136"; /*Yellow*/ 
 
    element.style.borderColor = "#FED136"; 
 
    alert(element); 
 
    } 
 
    return false; 
 
}

<a href="#" id="<?php echo $rowModelList['modelName']?>" onClick="return changecolor(this)" class="btn btn-primary">Select</a>

1. текст по умолчанию и цвет HREF является "Select" и в желтый цвет.
2. После нажатия на него цвет изменится на серый, и текст будет быть «выбранным».

Однако, я также пытаюсь получить идентификатор щелчка href и сохранить его в переменной. Я попробовал «alert(element.target.id);», но я получил «неопределенный».

Любая идея, как я могу изменить код, чтобы получить идентификатор?

Заранее спасибо.

Answer 1

Это должно быть alert(element.id). target является свойством события, а не элемента.

/* Changing the colour of the button upon clicked */ 
 
function changecolor(element) { 
 
    alert(element.id); 
 
    if (element.innerHTML == "Select") { 
 
    element.innerHTML = "Selected"; 
 
    element.style.backgroundColor = "#C0C0C0"; /*Grey*/ 
 
    element.style.borderColor = "#C0C0C0"; 
 
    alert(element); 
 
    } else { 
 
    element.innerHTML = "Select"; 
 
    element.style.backgroundColor = "#FED136"; /*Yellow*/ 
 
    element.style.borderColor = "#FED136"; 
 
    alert(element); 
 
    } 
 
    return false; 
 
}

<a href="#" id="<?php echo $rowModelList['modelName']?>" onClick="return changecolor(this)" class="btn btn-primary">Select</a>