Question

好吧，所以我正在处理一个按钮，当点击它时会显示来自我的RESTAPI的信息 - 所有这些都没有刷新/重新加载页面。

它将如何运作： HTML按钮调用javascript函数onClick - ＆gt; javascript调用我的API并显示我的API中的给定信息。

现在，我的API需要＆＃34;下注＆＃34;参数;这是一个整数。用户以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

您可以为输入标记赋予id并访问代码中输入的值。

<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 CODE

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

    //Make API call
}

您可以使用jQuery库进行api调用，使用起来快速而简单。如果不想使用那么你仍然可以使用XMLHttpRequest。

Answer 2

您可以使用.previousElementSibling引用上一个元素.value来获取元素.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.


}

如何将HTML表单信息传递给javascript？

3 个答案: