Показать сообщение отдельно
  #8 (permalink)  
Старый 02.09.2020, 12:06
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,149

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>
Ответить с цитированием