Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 01.09.2020, 19:49
Интересующийся
Отправить личное сообщение для DenisUfa Посмотреть профиль Найти все сообщения от DenisUfa
 
Регистрация: 07.01.2020
Сообщений: 20

Подсчет количества символов/цены
Ребят, помогите сделать правильно. Мне нужно чтобы правильно считалось стоимость, но что-то не выходит) Цена: 0.90 за 1000 символов, а у меня считает вообще не понятно как.

<div>
Кол-во символов: <span id="symbolscount">0</span>  
Стоимость: <span id="price">0</span>
</div>
<textarea id="form2">текст</textarea>


$(document).ready(function() {

    $(document).on('input', '#form2', function(){
        var text = $(this).val();
		var price = 0.90; //Цена за 1000 символов
			
        var spaces = text.match(/\s/g);
        if(!spaces) spaces = [];
        
        var splited = text.trim().split(/\s{1,}/);
        if(splited.length == 1 && splited[0].trim() == '') {
            splited = [];
        }
        
        var wordscount = text.length ? splited.length : 0;
        var symbolscount_no_space = text.length - spaces.length;
		

        $('#wordscount').text(formatNumber(wordscount));
      		
        $('#price').text(formatNumber(wordscount) / 1000) * price;

    })

});

function formatNumber(n) {
	return n.toString().replace(/(\d)(?=(\d{3})+$)/g, '$1 ');
}
Ответить с цитированием
  #2 (permalink)  
Старый 01.09.2020, 20:09
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,145

DenisUfa,
что такое символ?
Ответить с цитированием
  #3 (permalink)  
Старый 01.09.2020, 20:20
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,145

DenisUfa,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  </style>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script>
$(function() {

    $(document).on('input', '#form2', function(){
        var text = [...this.value];
		var price = 0.90; //Цена за 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>
</head>

<body>
<div>
Кол-во символов: <span id="symbolscount">0</span>
Стоимость: <span id="price">0</span>
</div>
<textarea id="form2">текст</textarea>


</body>
</html>
Ответить с цитированием
  #4 (permalink)  
Старый 01.09.2020, 20:38
Интересующийся
Отправить личное сообщение для DenisUfa Посмотреть профиль Найти все сообщения от DenisUfa
 
Регистрация: 07.01.2020
Сообщений: 20

Сообщение от рони Посмотреть сообщение
что такое символ?
Спасибо тебе большое человек!
Ответить с цитированием
  #5 (permalink)  
Старый 02.09.2020, 00:16
Интересующийся
Отправить личное сообщение для DenisUfa Посмотреть профиль Найти все сообщения от DenisUfa
 
Регистрация: 07.01.2020
Сообщений: 20

А какое решение можно применить в случае представленном ниже? Дело в том что на сайте переключаются формы с разными 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>
Ответить с цитированием
  #6 (permalink)  
Старый 02.09.2020, 06:46
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,145

DenisUfa,
зачем менять поля ввода, может менять только цену?
Ответить с цитированием
  #7 (permalink)  
Старый 02.09.2020, 09:03
Интересующийся
Отправить личное сообщение для DenisUfa Посмотреть профиль Найти все сообщения от DenisUfa
 
Регистрация: 07.01.2020
Сообщений: 20

Сообщение от рони Посмотреть сообщение
DenisUfa,
зачем менять поля ввода, может менять только цену?
Эх, если бы это было возможным... К этим формам привязанно еще куча функций. Я изначально так построил сайт. Люди уже привыкли переключать именно так, но просят для удобства отображать колличество/стоимость. Могу в лс скинуть адрес сайта.
Ответить с цитированием
  #8 (permalink)  
Старый 02.09.2020, 12:06
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,145

DenisUfa,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style>
.content {display:none;}
.content.open{
    display: block;
}
</style>
</head>
<body>
<div class="choice">
<label><input name="complexity" type="radio" value="0.60" checked="checked">0.60</label>
<label><input name="complexity" type="radio" value="0.90">0.90</label>
<label><input name="complexity" type="radio" value="2.0">2.0</label>
</div>
<div class="info">
Кол-во символов: <span id="symbolscount">0</span>
Стоимость: <span id="price">0</span>
</div>
<div class="content open" >
<textarea id="form1">текст1</textarea>
</div>
<div class="content">
<textarea id="form2">текст2</textarea>
</div>
<div class="content">
<textarea id="form3">текст3</textarea>
</div>
<script>
document.addEventListener( "DOMContentLoaded" , function() {
let index = 0;
const choice = [...document.querySelectorAll(".choice input")];
const symbol = document.querySelector("#symbolscount");
const out = document.querySelector("#price");
const content = document.querySelectorAll(".content textarea");
const totall = () => {
  const {length} = content[index].value;
  const price = choice[index].value;
  const sum = numberWithCommas(length * price / 1000);
  symbol.textContent = length;
  out.textContent = sum;
}
const open = (el) => {
    content[index].parentNode.classList.remove("open");
    index = choice.indexOf(el);
    content[index].parentNode.classList.add("open");
    totall();
}
document.addEventListener("change", ({target}) => {
     if(target = target.closest(".choice input")) open(target)
 })
document.addEventListener("input", ({target}) => {
     if(target = target.closest(".content textarea")) totall()
 })
function numberWithCommas(str) {
        return (+str).toFixed(2).replace(/(\d+)(\.\d+)?/g, function (c, b, a) {
        return b.replace(/(\d)(?=(\d{3})+$)/g, "$1 ") + a
});
}
totall();
});
</script>
</body>
</html>
Ответить с цитированием
  #9 (permalink)  
Старый 02.09.2020, 12:25
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,989

рони, а количество пусть указывают поля текстовые, чтобы более вообще вопросов не было.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Подсчет количества кликов мыши на объект в jquery Евгений_86 Events/DOM/Window 27 03.02.2019 03:46
Подсчет количества запросов к API _marisha Общие вопросы Javascript 1 20.09.2018 11:03
Подсчет количества выбранных чекбоксов и радио jemlive19 Элементы интерфейса 0 08.01.2017 18:46
Подсчет и вывод количества сравнений в методе быстрой сортировки массива kogenate Общие вопросы Javascript 5 11.06.2016 18:33
Подсчет количества повторений слов Макс [44] Общие вопросы Javascript 4 25.04.2012 18:18