javascript - 根据文本区域中的行计算值(value)/价格

Question

我正在尝试计算一个价格，该价格取决于您在文本区域中使用的行数。这是我到目前为止所想出的。唯一的问题是它不会计算，我想我已经看过很多东西了。

让我解释一下，首先是一些文本广告。 最少 2 行需要固定费用，然后每新行额外收取 10 行费用，最多 10 行。

var flatFee = '70.00';
var perRow = '10.00';

function rowCount(area, maxlength) {
  
    //var area = document.getElementById("textarea-1")
    // trim trailing return char if exists
var text = area.value.replace(/\s+$/g, "");
var split = text.split("\n");
if (split.length > maxlength) {
  split = split.slice(0, maxlength);
  area.value = split.join('\n');
  alert("You can not enter more than " + maxlength.toString() + " lines");
}
return false;
}

var div = $('span.rowCount');

jQuery('textarea#textarea-1').on('input', function($) {

  var count = rowCount(this.value);
  div.html(count.rows);

  /*var additionalFees = perRow*count.rows;*/

  if (count.rows > 2) {
    var additionalFees = perRow * (count.rows - 2);
  }

  var total = parseFloat(flatFee) + parseFloat(additionalFees);

  $('span.total').html(parseFloat(total.toString()).toFixed(2));
  /*var total = $('span.total');*/

  console.log(total);
});

<textarea cols="32" rows="10" maxlenght="320" class="form-control" name="textarea-1" id="textarea-1" placeholder="Type or paste your prompt here."></textarea>
<p>You have <span class="rowCount">0</span> rows.Total <span class="total">0</p>

Answer 1

稍微修改了你的函数。现在可以使用

var flatFee = '70.00';
var perRow = '10.00';

function rowCount(area, maxlength) {

  //var area = document.getElementById("textarea-1")
  // trim trailing return char if exists
  var text = area.replace(/\s+$/g, "");
  var split = text.split("\n");
  if (split.length > maxlength) {
    split = split.slice(0, maxlength);
    area.value = split.join('\n');
    alert("You can not enter more than " + maxlength.toString() + " lines");
  }
  return {rows:split.length};
}

var div = $('span.rowCount');

jQuery('textarea#textarea-1').on('input', function($) {

  var count = rowCount(this.value);
  div.html(count.rows);

  /*var additionalFees = perRow*count.rows;*/
var additionalFees=0;
  if (count.rows > 2) {
    additionalFees = perRow * (count.rows - 2);
  } 

  var total = parseFloat(flatFee) + parseFloat(additionalFees);

  //$('span.total').html(total.toString().toFixed(2));
  /*var total = $('span.total');*/

  console.log(total);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<textarea cols="32" rows="10" maxlenght="320" class="form-control" name="textarea-1" id="textarea-1" placeholder="Type or paste your prompt here."></textarea>
<p>You have <span class="rowCount">0</span> rows.Total <span class="total">0</span></p>