console.log 在事件提交內不起作用

Question

我不能做一個console.log。 在事件偵聽器之外，它完美無缺。 但是當我想在事件偵聽器（表單提交）中執行 console.log 時，控制台中沒有任何內容。

<form id="formMovies">
    <input type="text" id="title">
    <button type="submit" id="boton">Guardar</button>
</form>

<script>
var _form = document.querySelector("#formMovies");
var _title = document.querySelector("#title").value;

_form.addEventListener('submit', ()=>{
    console.log(_title);
});
</script>

Answer 1

發生這種情況是因為“提交”操作刷新了頁面，這意味着將重新加載瀏覽器控制台並清除所有日志。

如果您想停止此行為以查看您的日志消息，您可以使用preventDefault()或return false; 喜歡：

_form.addEventListener('submit', (e)=>{
     e.preventDefault();
     console.log(_title);

     //Or
     //return false;
});

Answer 2

問題是在單擊按鈕之前運行代碼時，沒有將值設置為_title 。 獲取事件處理函數中的值。 您還可以使用event.preventDefault()來阻止表單的提交，您可以看到輸出。

 <form id="formMovies"> <input type="text" id="title"> <button type="submit" id="boton">Guardar</button> </form> <script> var _form = document.querySelector("#formMovies"); _form.addEventListener('submit', (e)=>{ var _title = document.querySelector("#title").value; console.log(_title); e.preventDefault(); }); </script>

Answer 3

您必須阻止在type=submit上觸發的默認操作（用其他內容替換/重新加載頁面），並根據您的需要在幾秒鍾后使用form.submit()顯式提交表單；

var _form = document.querySelector("#formMovies");
var _title = document.querySelector("#title").value;

_form.addEventListener('submit', evt => {
    evt.preventDefault();
    console.log(_title);
});

Answer 4

提交后，頁面重定向到同一頁面（沒有 href 或 action）或不同，因此您無法看到控制台輸出

據我所知，已經找到了 2 種方法來處理這個問題

1. 在將停止重定向的事件上調用preventDefault ，您會看到控制台輸出

代碼片段

索引.html

<a class="clear-tasks btn black" href="some url">Clear Tasks</a>

應用程序.js

const clearBtn = document.querySelector(".clear-tasks");
clearBtn.addEventListener('click',function(e){
    e.preventDefault();
    console.log(e);
});

2. 保留 href="#"

代碼片段

索引.html

<a class="clear-tasks btn black" href="#">Clear Tasks</a>

應用程序.js

const clearBtn = document.querySelector(".clear-tasks");
clearBtn.addEventListener('click',(e)=>{
    console.log(e);
});