I am creating a web based jeopardy game and I seem to have run into an issue.
when I right click to edit a player name a input menu will show up.
The next time I click edit two menus pop up... This is kinda hard for me to explain so I linked a video with a demo of what the issue is.
Javascript Code
let player1_name_edit = document.getElementById('player1-name-edit')
let editButton = document.getElementById('edit-context-menu') // Gets 'edit-context-menu' from DOM
let inputMenu = document.getElementById('input-menu')
var cancelButton = document.getElementById('cancel-context-menu') // Gets 'cancel-context-menu' from DOM
player1_name_edit.addEventListener('contextmenu', function(event) {
if(event.target == player1_name_edit) {
event.preventDefault()
showEditMenu()
editButton.addEventListener('click', function() {
createInputMenu()
inputMenu.addEventListener('keyup', function(event) {
if(event.key === 'Enter') {
let inputMenuValue = document.getElementById('name-input')
player1_name_edit.innerText = inputMenuValue.value
removeInputMenu()
}
})
})
}
})