HTMLフォーム情報をJavaScriptに渡すにはどうすればよいですか？

Question

申し訳ありませんが、ボタンをクリックすると、RESTAPIの情報が表示されます。すべて、ページを更新/再読み込みすることなく表示されます。

動作方法： HTMLボタンはjavascript関数を呼び出しますonClick - > javascriptは自分のAPIを呼び出し、APIから指定された情報を表示します。

私のAPIには「ベット」パラメータが必要です。これは整数です。ユーザーはこれをHTML入力フォームで提供します。

だから、

 <form> 
      Bet<br> 
      <input onchange="checkBet" value="0.00001" type="text" name="bet"><br> 
      <button type="button" id="dicebutton" onclick="prepareRoll()" style="vertical-align:middle"><img src="Images/dice.png"> Roll dice!</button> 
     </form> 

は、<input onchange="checkBet" value="0.00001" type="text" name="bet"><br>に数で入力したユーザーを想定し、どのように私は私のjavascript関数"prepareRoll()"にそれを渡すことができますか？

Answer 1

を取得する.value、前の要素を参照するために.previousElementSiblingを使用することができます。

<form> 
     Bet<br> 
     <input id="betField" onchange="checkBet" value="0.00001" type="text" name="bet"><br> 
     <button type="button" id="dicebutton" onclick="prepareRoll()" style="vertical-align:middle"><img src="Images/dice.png"> Roll dice!</button> 
    </form> 

JSコード

function prepareRoll(){ 
    var input = document.getElementById('betField') 
    var bet = input.value; 

    //Make API call 
} 

あなたは、API呼び出しを行うためにjQueryライブラリを使用することができ、それを使用するために迅速かつ簡単です。それを使用したくない場合は、XMLHttpRequestを使用することができます。

Answer 2

あなたが入力タグにIDを付与し、コード入力の値にアクセスすることができる要素.value

<button type="button" id="dicebutton" onclick="prepareRoll(`${this.previousElementSibling.name}=${this.previousElementSibling.value}`)" style="vertical-align:middle"><img src="Images/dice.png"> Roll dice!</button> 

Answer 3

関数呼び出しで値を渡すのではなく、ここで関数の値を取得しようとします。

function prepareRoll(){ 
    var value=$("input type=['text']").val() 
    //write the remaining code. 


}