(HTML)
<div class="keyboard-login">
<div class="display-login" ></div>
<div class="buttons">
<div class="key-btn-container">
<button class="key key-btn key_1">1</button>
</div>
<div class="key-btn-container">
<button class="key key-btn key_2">2</button>
</div>
~~~~~~~~~~~~~~~~~~~~~~~~~~~~
</div>
</div>
(javascript)
keyboardLogin.addEventListener('click',(e)=>{
console.log(loginDisplay.value);
if (e.target.classList.contains('key_1')) {
let valu = loginDisplay.innerHTML;
loginDisplay.innerHTML=valu+'1';
}
if (e.target.classList.contains('key_2')) {
let valu = loginDisplay.innerHTML;
loginDisplay.innerHTML=valu+'2';
}
if (e.target.classList.contains('key_3')) {
let valu = loginDisplay.innerHTML;
loginDisplay.innerHTML=valu+'3';
}
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
});
Hello. I'm making a virtual keyboard, when I check 'console.log(login display.value);', it show me up 'undefined'. and I need number-value from the display element. What can I do?? Thank you.
Change:
e.target.classList.contains('key_1')
by:
e.target.className.includes('key_1')
If loginDisplay is an input label, change:
if (e.target.classList.contains('key_1')) {
let valu = loginDisplay.innerHTML;
loginDisplay.innerHTML=valu+'1';
}
by:
if (e.target.className.includes('key_1')) {
loginDisplay.value += '1';
}