constantly updating a button's name-CodePudding

I have code like this, and I want the raise button to tell the user how much they are going to bet if they click the button. If the value of the input were changed to 10, then I want the raise button to say "raise 10". Something along those lines. I'd like it to essentially change in 'real time' as a user types in the input box.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>poker</title>
</head>
<body>
    <div>
      <form id="actionForm">

        <button id="fold"  type="submit">Fold</button>
        <button id="call"  type="submit">Call</button>
        <button id="raise"  type="submit">Raise<br>0</button>
        <br>
        <input id="amount" autocomplete="off" title="amount" value="0" />

      </form>
    </div>

</body>
</html>

I think I worded the question poorly when I searched online so I've come here for help. I'm not sure if I need js to do this with a loop of sorts, or there is something built into HTML.

CodePudding user response：

Try something like this:

<script>
function updateButton()
{
    // get value from input field
    var inputValue = document.getElementById("inputField").value;
    // update button text
    document.getElementById("raise").innerHTML = "Raise "   inputValue;
}
</script>

The HTML

<input type="text" id="inputField" oninput="updateButton()">

PS: The oninput event occurs immediately after the value of an element has changed, while onchange occurs when the element loses focus, after the content has been changed.

CodePudding user response：

You will need Javascript to create this behavior. Steps would be :

Save "Raise" value into a variable
Set this value for your "button" label, and use it for increasing the amount

Here's what I came with :

  <script>
    function handleChange(){
      var amount = document.getElementById('amount').value
      document.getElementById('raise').innerText = `Raise ${amount}`
    }
  </script>

and call it as follows :

<input id="amount" autocomplete="off" onkeyup="handleChange()" />

I'm using "onkeyup" to achive the 'real-time' you mentioned.

Hope it helps!