javascript - 如何根据输入字段动态更改网页内容

Question

我有一个正在构建的网页，我希望它在更改几个输入值时更新页面上的一些文本。基本上，这是我认为应该遵循的算法，但我不太确定。 (澄清一下，我也在使用 PHP)但是除了 HTML 和 CSS 以及少量的 javascript 之外，我对任何其他语言没有任何进一步的了解。

Open Amount: $<input type="text" name="openamount"><br />
Close Amount: $<input type="text" name="closeamount"><br />
<script type="text/javascript">
    document.write("Profit $" + document.getElementsByName("openamount").value - document.getElementsByName("closeamount").value);
</script>

有几个问题，首先当页面加载时它给了我一些未定义的东西，而我宁愿它只是以空白开始，其次当我将内容放入输入字段时它没有更新。最重要的是，我需要实际发送的利润作为 POST 表单中的值之一。提前感谢您的帮助。

Answer 1

您的 javascript 在页面加载时立即运行，并且再也不会运行。取而代之的是，您希望 Hook 元素的更改事件以在它们发生更改时运行代码。至于将利润添加到 POST 变量，只需在您的表单中创建一个隐藏的输入来保存利润值。

这是一个演示所有这些的 jsfiddle:https://jsfiddle.net/yjvvjq49/

HTML:

<form method="POST">
  Open Amount: $<input type="text" id="openamount" name="openamount"><br />
  Close Amount: $<input type="text" id="closeamount" name="closeamount"><br />

  <input type="hidden" id="profit" name="profit"/>
  Profit: $<span id="profitText"></span>
</form>

Javascript:

var openElement = document.getElementById("openamount");
var closeElement = document.getElementById("closeamount");
var profitElement = document.getElementById("profit");
var profitTextElement = document.getElementById("profitText");

function updateProfit() {
  var profit = (Number(closeElement.value) - Number(openElement.value)).toFixed(2);
  profitElement.value = profit;
  profitTextElement.innerText = profit; 
}

openElement.onchange = closeElement.onchange = updateProfit;