変数の送信ボタンをクリックすると、HTMLフォームのテキスト値を保存しようとしています。この値は、送信ボタンがクリックされてからもう一度blanckになるとすぐに2秒間保存されます。なぜこうなった？あなたは、（ボタンの）性質上、ページのリロードを提出クリックしているクリックイベントに値を格納

var userSearch = ""; 
 

 
$(document).ready(function() { 
 
    $("#buttonA").click(function() { 
 
    userSearch = document.getElementById("userSearch").value; 
 
    console.log(userSearch); 
 

 
    }); 
 
    console.log(userSearch); 
 
});

<!DOCTYPE> 
 
<head> 
 
    <link rel="stylesheet" href="stylesheet.css"> 
 
    <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet"> 
 
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 
 
    <script src="https://use.fontawesome.com/ca5f7b6f9a.js"></script> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
    <script src="script.js"></script> 
 
</head> 
 

 
<body> 
 
    <div class="container text-center"> 
 
    <a href="https://en.wikipedia.org/wiki/Special:Random"> Random article</a> 
 
    <div id="searchBox"> 
 
     <form> 
 
     <input type="text" id="userSearch" name="userSearch"> 
 
     <button id="buttonA">Submit</button> 
 
     </form> 
 
    </div> 
 

 
    <div id="resultsBox"></div> 
 
    </div> 
 
</body>

出典

2016-08-03 Carlosl93

あなたは、クリックして、ページのリロード – Maxx

でフォームを送信しています。値を保持する必要がある場合は、cookieまたはlocalstorageオブジェクトを参照してください。 – jeff

@RoryMcCrossan +1 –

formのボタンを押すと、デフォルトでフォームが送信されます。したがって、ページがリロードされ、クライアントサイド変数の状態が失われます。

に1つのページのロードから変数を渡すために別のメカニズム（例：クッキーを。）を使用し、リスナー
に渡されたイベントオブジェクトにe.preventDefault()を呼び出すことにより提出するため防ぐ：このあなたは可能性を防ぐために

他の

例`preventDefault`

var userSearch = ""; 
 

 
$(document).ready(function() { 
 
    $("#buttonA").click(function(e) { 
 
    e.preventDefault(); 
 
    userSearch = document.getElementById("userSearch").value; 
 
    console.log(userSearch); 
 

 
    }); 
 
    console.log(userSearch); 
 
});

<!DOCTYPE> 
 
<head> 
 
    <link rel="stylesheet" href="stylesheet.css"> 
 
    <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet"> 
 
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 
 
    <script src="https://use.fontawesome.com/ca5f7b6f9a.js"></script> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
    <script src="script.js"></script> 
 
</head> 
 

 
<body> 
 
    <div class="container text-center"> 
 
    <a href="https://en.wikipedia.org/wiki/Special:Random"> Random article</a> 
 
    <div id="searchBox"> 
 
     <form> 
 
     <input type="text" id="userSearch" name="userSearch"> 
 
     <button id="buttonA" type="button">Submit</button> 
 
     </form> 
 
    </div> 
 

 
    <div id="resultsBox"></div> 
 
    </div> 
 
</body>

あなたはページ全体は、このように以前の値を失う再ロードされている提出をクリックすると0

出典

2016-08-03 14:13:00 Matyas

。これにより、既存のフォーム値がリセットされます。理想的には、PHPなどのサーバー側言語で提供される新しいページにユーザーを連れて行くことができます。データをそのまま入力したい場合は<button id="buttonA">Submit</button>を<input type="button" value="submit">に変更してください。

また、Cookieを使用して、ページリロードの間にフォーム値を格納することもできます。

ただし、既存のスクリプトはスニペットで正常に動作します。だからあなたのマシンに間違っていることがあるかもしれません。

出典

2016-08-03 14:10:53

クリックイベントに値を格納

答えて

例preventDefault

関連する問題

例`preventDefault`