Question

我需要使用JAVASCRIPT进行两种方式的数据绑定。两个要素：输入和价格跨度。当向输入价格添加任何符号时，价格应增加5。一个价格+5。有任何想法吗？谢谢！

Answer 1

您可以尝试以下操作：

let el = document.getElementById('output');
let input = document.getElementById('input');
let price = document.getElementById('price');

function change () {
  el.innerText = input.value;
  let priceAmount = parseInt(price.innerText);
  priceAmount += 5;
  price.innerText = priceAmount;
  
}

<input type="text" oninput="change()" id="input"/>

<br>

<span id="output"></span>

<br>

<span id="price">0</span>

它使用oninput DOM事件，该事件每次都调用函数change，并根据元素的输入每次更新span元素。

Answer 2

您可以在输入元素上使用oninput事件。例如：

<input type='text' id='input' oninput='change()'/>
<br/>
<span id='price'></span>

<script>
function change() {
    // Get value from input
  var rawInput = document.getElementById("input").value;
  var value = parseInt(rawInput);
  // Update value for output
  if (isNaN(value)) {
    document.getElementById("price").innerHTML = 'Please enter valid value';
  } else {
    document.getElementById("price").innerHTML = value + 5;
  }
}
</script>

纯JS中的两种数据绑定方式？

2 个答案: