1

我有一些 javascript 将文本字段的字数返回到 'wordcount' 变量中。

我希望在整个 HTML 中显示“wordcount”变量（以及基于它的其他变量）。但是在某种程度上，它们可以随着字数的变化而不断更新。

例如，您当前的字数是 10。您还有 5 个字。当前费用为 10 英镑（1 英镑/字）。

我对 JavaScript 的奇迹还比较陌生，但我从网上阅读的内容中获得了以下内容......

  1. document.write不赞成。
  2. getElementById只允许我显示每个变量一次。
  3. jQuery 具有在.data本地存储（和更新？）数据的功能？

谁能指出我正确的方向？

谢谢，安迪。

代码按要求...

<!DOCTYPE html>
<html>
<head>
<title>Word Count Test</title>
</head>
<body onload="countnow()">


<form method="POST" name="counter">

<script language="JavaScript">
var freebie_words = 15
var base_price = 10.00
var word_price = 0.50
var wordcount = 0
var additional_words = 0

function countnow(){
var formcontent=document.counter.userscript.value
var formcontent=formcontent.split(" ")
var wordcount=formcontent.length
var freebie_remaining=freebie_words-wordcount

if (wordcount>freebie_words)
{
  additional_words=wordcount-freebie_words
} else {
  additional_words=0;
}

if (wordcount<freebie_words)
{
  cost=base_price.toFixed(2);
} else {
  cost=(base_price+(additional_words*word_price)).toFixed(2);
}

document.getElementById("freebie_words").innerHTML = freebie_words;
document.getElementById("base_price") = base_price;
document.getElementById("word_price") = word_price;
document.getElementById("wordcount") = wordcount;
document.getElementById("freebie_remaining") = freebie_remaining;
document.getElementById("cost") = cost;

}
</script>

<table>
<tr>
<td width="100%">
<textarea rows="10" name="userscript" cols="60" onkeyup="countit()"></textarea>
</td>
</tr>
</table>

The base price is set to &#163;<span id='base_price'></span> for <span id='freebie_words'></span>.<br>
The base price limit is set to <span id='freebie_words'></span>.<br>
You have typed <span id='wordcount'></span> words.<br>
You have <span id='freebie_remaining'></span> free words left.<br>
That will be &#163;<span id='cost'></span>.
</form>

</body>
</html>
4

1 回答 1

3

从概念上讲，您可以这样做：

  • wordcount创建一个在您更改时触发的函数。
  • 为具有您要更新的文本/数字的所有元素（span、div 等）指定一个类。
  • 使用 jQuery，您可以在函数内部使用：$('.mychangeclass').text(wordcount);

如果您发布一些 html，我可以根据您的代码进行回答。

于 2013-08-26T20:57:48.843 回答