纯JS中的两种方式数据绑定？ [关闭]答案

【问题标题】：Two way data binding in pure JS? [closed]纯JS中的两种方式数据绑定？ [关闭]
【发布时间】：2018-08-05 09:17:07
【问题描述】：

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

【问题讨论】：

当您说“添加任何符号以输入价格”时，您的意思是用户输入数量（即购买金额x成本）时？还是价格乘以字段中的字符数（即按字符收费）？
如何输入 -> span 双向数据绑定？

【解决方案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元素。

【讨论】：

【解决方案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>

【讨论】：