Двухстороннее связывание данных в чистом JS?

Question

Двухстороннее связывание данных в чистом JS?

1

Мне нужно сделать двустороннюю привязку данных с JAVASCRIPT. Два элемента: вход и диапазон с ценой. При добавлении какого-либо символа к стоимости входа следует увеличить с помощью 5. Один символ +5 для цены. Есть идеи? Спасибо!

Rm Ch 05 авг. 2018, в 12:06

Источник

1

Когда вы говорите «добавить какой-либо символ к входной цене», вы имеете в виду, когда пользователь вводит количество (то есть сумма покупки x стоимость)? или цена умножается на количество символов в поле (т.е. взимается за символ)?
Nathan Stockton 05 авг. 2018, в 09:22
0

Как ввод -> охват двухсторонней привязки данных?
Jonas Wilms 05 авг. 2018, в 09:31

Теги:

javascript

data-binding

2 ответа

0

Вы можете использовать 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>

Scofield 05 авг. 2018, в 07:37

Ещё вопросы

Когда вы говорите «добавить какой-либо символ к входной цене», вы имеете в виду, когда пользователь вводит количество (то есть сумма покупки x стоимость)? или цена умножается на количество символов в поле (т.е. взимается за символ)?
Как ввод -> охват двухсторонней привязки данных?

Willem van der Veen · Accepted Answer · 2018-08-05T08-20-00.000Z

Вы можете попробовать следующее:

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, которое вызывает изменение функции каждый раз, каждый раз обновляя элемент span в соответствии с входом элемента.