HTML/JavaScript - 入力値が更新されない（Element.value = Null）

Question

こんにちは、私は今日始めました。

JavaScriptファイルにユーザーが入力できる文字列を取得する必要があります。私は、document.getElementById("myID").valueを使用して、htmlサイトの入力フィールドの値を取得する必要があることを知りました。私の問題は次のとおりです：提出はサイトのリロードを強制し、私の機能は何の影響も与えないので、私は入力とボタンを囲む括弧を使うことはできません。

だから私はJavaScriptファイルに文字列を飛ばす必要があります。

これは私が現時点で持っているすべてです：

<div id="searchDiv"> 
    <input type="text" id="searchInput" placeholder="Search for Gifs..." value="" /> 
    <input type="button" id="searchButton" value="Search"></button> 
</div> 

そして、私のJavaScriptファイル：

var searchButton = document.getElementById("searchButton"); 
var searchInput = document.getElementById("searchInput").value; 

searchButton.addEventListener("click", 
    function() { 
    function(parameter) 
    } 
)... 

のでdocument.getElementById("searchInput").value;は、入力フィールドが編集された場合でも、ヌルをお返し。

私があなたを助けてくれることを願っています。

Answer 1

値は関係なく、あなたが

ボタンのクリックイベントにアクセスしてみてください入力として入力するものでは空になりますので、あなたは、ボタンがクリックされる前であってもsearchInput値を格納しているので、それがある

チェックこのスニペット

var searchButton =document.getElementById("searchButton"); 
 
var searchInput=document.getElementById("searchInput"); 
 
window.onload=function(){ 
 
searchButton.addEventListener("click", 
 
    function() { 
 
    alert(searchInput.value); 
 
    } 
 
) 
 
}

<div id="searchDiv"> 
 
    <input type="text" id="searchInput" placeholder="Search for Gifs..." value="" /> 
 
    <input type="button" id="searchButton" value="Search"> 
 

 
</div>

・ホープそれはあなたの代わりに私がやったこと

<input></button> 

の

<button></button> 

を使用する必要があります

Answer 2

が

<div id="searchDiv"> 
     <input type="text" id="searchInput" placeholder="Search for Gifs..."> 
     <button id="searchButton">Search</button> 
    </div> 

    <script type="text/javascript"> 
     document.getElementById("searchButton").onclick = function(){ 
      alert(document.getElementById("searchInput").value); 
     } 
    </script>