А какое решение можно применить в случае представленном ниже? Дело в том что на сайте переключаются формы с разными id и там разные цены. Я примерно представляю что нужно делать, менять переменную price, но как быть с формами?
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style>
#content2, #content3{display:none;}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<div class="knopki">
<button onclick="smena1()">0.60</button>
<button onclick="smena2()">0.90</button>
<button onclick="smena3()">2.0</button>
</div>
<script>
function smena1() {
document.getElementById('content1').style.display = 'block';
document.getElementById('content2').style.display = 'none';
document.getElementById('content3').style.display = 'none';
}
function smena2() {
document.getElementById('content1').style.display = 'none';
document.getElementById('content2').style.display = 'block';
document.getElementById('content3').style.display = 'none';
}
function smena3() {
document.getElementById('content1').style.display = 'none';
document.getElementById('content2').style.display = 'none';
document.getElementById('content3').style.display = 'block';
}
</script>
<div class="info">
Кол-во символов: <span id="symbolscount">0</span>
Стоимость: <span id="price">0</span>
</div>
<div id="content1">
<textarea id="form1">текст</textarea>
</div>
<div id="content2">
<textarea id="form2">текст</textarea>
</div>
<div id="content3">
<textarea id="form3">текст</textarea>
</div>
<script>
$(function() {
$(document).on('input', '#form1', function(){
var text = [...this.value];
var price = 0.60; //Цена за 1000 символов
var sum = text.length * price / 1000;
sum = numberWithCommas(sum)
$('#symbolscount').text(text.length);
$('#price').text(sum) ;
})
});
function numberWithCommas(str) {
return (+str).toFixed(2).replace(/(\d+)(\.\d+)?/g, function (c, b, a) {
return b.replace(/(\d)(?=(\d{3})+$)/g, "$1 ") + a
});
}
</script>
</body></html>