我有这样的代码，我希望raise按钮告诉用户，如果他们单击该按钮，他们将下注多少。如果输入的值被更改为10，那么我希望raise按钮显示"raise 10"。差不多就是这样。我希望当用户在输入框中输入时，它能"实时"改变。
<!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" class="turn" type="submit">Fold</button>
<button id="call" class="turn" type="submit">Call</button>
<button id="raise" class="turn" type="submit">Raise<br>0</button>
<br>
<input id="amount" autocomplete="off" title="amount" value="0" />
</form>
</div>
</body>
</html>
我觉得我在网上搜索的时候把这个问题写得很糟糕，所以我来这里寻求帮助。我不确定我是否需要js用各种循环来做这件事，或者有一些东西内置到HTML中。
试试这样:
<script>
function updateButton()
{
// get value from input field
var inputValue = document.getElementById("inputField").value;
// update button text
document.getElementById("raise").innerHTML = "Raise " + inputValue;
}
</script>
HTML
<input type="text" id="inputField" oninput="updateButton()">
PS:oninput事件在元素的值发生改变后立即发生，而onchange在内容被更改后，元素失去焦点时发生。
您将需要Javascript来创建此行为。步骤如下:
- 保存"Raise"值转换为变量
- 为你的按钮设置这个值标签，并使用它来增加
这是我带来的:
<script>
function handleChange(){
var amount = document.getElementById('amount').value
document.getElementById('raise').innerText = `Raise ${amount}`
}
</script>
，并按如下方式调用:
<input id="amount" autocomplete="off" onkeyup="handleChange()" />
我用的是"onkeyup"实现你提到的"实时"。
希望有帮助!