Идентификатор кнопки не может быть получен / показан с помощью getElementById

Question

Я пытаюсь создать калькулятор с использованием Javascript / HTML / CSS и в настоящее время на этапе попытки заставить нажатую кнопку (используя класс кнопки Bootstraps) отображаться на дисплее.

Часть HTML:

<div class="row">
     <button class="keys" id="7">7</button>
     <button class="keys" id="8">8</button>
     <button class="keys" id="9">9</button>
     <button class="keys" id="/"><img src="images/division.png" height="50em" width="50em"></button>
     <button class="keys" id="reset">C</button>
</div>

В файле js:

function calculate(evt){
   var keyValue = evt.target.id  // recording the key value into variable

   tempDisplay += keyValue;
   document.getElementById("display").innerHTML = tempDisplay;
}

Первые 3 строки (7,8 и 9) в порядке, getElementById может захватить идентификаторы и показать их на "display "section.

Однако я не смог получить строку с изображением, чтобы показать ее идентификатор, т.е." / "на дисплее.

Если я ввел какой-то текст, например:

<button class="keys" id="/">text<img src="images/division.png"></button>

, тогда "/" может отображаться нормально.

Любая помощь приветствуется

Answer 1

function calculate(evt){


    e = evt.target || evt.srcElement;    
    var keyValue;  // recording the key value into variable   
    if (e.nodeName === 'BUTTON') {
        keyValue=e.id;
    }   
    if (e.nodeName === 'IMG') {
       keyValue=e.parentNode.id;
    }
    tempDisplay += keyValue;
    document.getElementById("display").innerHTML = tempDisplay;
}

Answer 2

evt.target будет элементом, по которому щелкнули.

 <button class="keys" id="/"><img src="images/division.png" height="50em" width="50em"></button>

В этом случае этот элемент будет <img>.

Если вы хотите получитьИдентификатор кнопки, содержащей ее, затем вам нужно проверить ее родителя.

Общее решение этого вопроса - рекурсивно проверять tagName из parentNode, пока не найдете кнопку или не закончатся родители.