JavaScriptを使用してフォーム内の入力フィールドの値を取得する

Question

入力フィールドをフォームフィールドにラップすると、コンソールログが値を印刷できない理由を理解できますか？

HTML：

<form> 
     <input id="formEntry" type="text"> 
     <button id="btn-3">Add Custom Line</button> 
    </form> 

はJavaScript：

var addCustomLine = function(){ 
     var customLine = document.getElementById("formEntry").value; 
     console.log(customLine); 
} 

document.getElementById("btn-3").addEventListener ("click", addCustomLine, false); 

Answer 1

ボタンタイプを指定しないと、デフォルトで親フォームが送信されます。型を明示的に "ボタン"に設定することで、この動作を防ぐことができます。

<button type="button" id="btn-3">Add Custom Line</button> 

Answer 2

<form>で<button>がイベントそのすべてのエフェクトを再ロードし、無効にするページが発生しますデフォルトで形成を、提出します。ハンドラが持っていた。ただし、その動作を防ぐことができます。

function addCustomLine(event) { 
    event.preventDefault(); 
    … 
} 

あなたが通常の形ではなく、ボタンのclickイベントのsubmitイベントでそのハンドラをインストールすることをお勧めします。