一个不断变化的JavaScript变量在HTML中的多个位置显示(并更新）

One changing JavaScript variable being displayed (and updated) in multiple locations in HTML

本文关键字：显示 更新 HTML 位置 JavaScript 一个 变量 变化      更新时间：2023-09-26

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

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

例如，您当前的字数是10。你还有5个单词。目前的成本为10英镑（1英镑/字）

我对JavaScript的奇迹还比较陌生，但我从网上阅读到了以下内容。。。

  1. CCD_ 1不受欢迎
  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>

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

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

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

相关文章：