提交事件監聽器的問題

Question

我正在嘗試使我的第一個提交事件偵聽器，以便按鈕響應單擊事件和輸入鍵事件。 現在它對任何一個都沒有響應，我不知道為什么。 我沒有將任何信息發送到另一個頁面 - 我只是希望它觸發其他事件。

 var domStrings = { submit: document.querySelector('#submit') } var checker = function() { var lcase; domStrings.submit.addEventListener("click", function(e) { e.preventDefault(); console.log('form submitted'); lCase = guess.value.toLowerCase(); turnCounter++; if (entryField.value.includes(lCase)) { for (i = 0; i < entryField.value.length; i++) { if (lCase === entryField.value[i]) { retainAndReplace(domStrings.word.textContent, i, lCase) } } } else { //tell user they're wrong wrong.style.visibility = 'visible'; wrong.classList.add('.fade-out-wrong') setTimeout(invisibleWrong, 4000); guessCounter--; if (guessCounter < 1) { //display game over over.style.display = 'inline' chances.textContent = `Guesses remaining: 0`; wrong.style.display = 'none'; //hide dashes word.style.display = 'none' } else { chances.textContent = `Guesses remaining: ${guessCounter}`; } } }) } checker()

 <input type = 'text' id = 'guess' placeholder = 'Letter Guess' maxlength = '1'> <button type = 'submit' id ='submit'> Submit </button>

Answer 1

提交事件是在<form>元素本身上觸發的，而不是在其中的按鈕上。 所以解決方案是將你的元素包裝在一個<form>中，你應該附加事件監聽器。

 form.addEventListener("submit", event => { event.preventDefault() output.innerHTML = guess.value })

 <form id="form"> <input id="guess" placeholder="Letter Guess" maxlength="1"> <button type="submit">Submit</button> </form> <div>Guessed letter: <span id="output"><span></div>