【发布时间】：2014-08-04 07:25:21
【问题描述】：
对于家庭作业，我必须制作一个带有文本区域的网页。用户输入一些文本，点击分析按钮，输出应该是给定字符数的单词频率列表。例如，“一二三”将是两个三个字符的单词和一个五个字符的单词。文本区域工作正常，但我似乎无法让输出出现。
这里是html：
<body>
<textarea id="text" rows="26" cols="80"></textarea>
<form>
<input type="button" id="analyse" value="Analyse Text">
</form>
<div id="output"></div>
</body>
JavaScript 文件有 6 个函数。第一个函数返回一个数组，该数组存储输入文本区域中每个单词的字符数：
function getWordInfo() {
var text = document.getElementById("text").value;
//the variable wordArray uses a regular expression to parse the input
var wordArray = text.split("/\w\w+/g");
var arrayLength = wordArray.length;
var charArray = [];
for (var i = 0; i < arrayLength; i++) {
var splitWord = wordArray[i].split("");
var wordLength = splitWord.length;
charArray.push(wordLength);
}
return charArray;
}
第二个函数是一个简单的对象构造函数，它有一个 name 属性和一个 count 属性。 count 属性的默认值为 0。
function obCon(name,count) { //object constructor
this.name = name;
this.count = count;
count = typeof count !== "undefined" ? count : 0;
}
第三个函数返回一个存储单词对象的数组。每个对象都有一个 name 属性和一个 count 属性。 name 属性是单词中的字符数。 count 属性计算具有给定名称属性的对象出现的次数。
function arCon() { //array constructor
var charNum = getWordInfo();
var arrayLength = charNum.length;
var obArr = [];
for (var i = 0; i < arrayLength; i++) {
if (typeof obArr.indexOf( newOb.name === charNum[i] ) != "undefined" ) { // checks if the object needed exists
obArr.indexOf( newOb.name === charNum[i] ).count = obArr.indexOf( newOb.name === charNum[i] ).count + 1;
}else{
var newOb = new obCon(charNum[i]);
newOb.count = newOb.count + 1;
obArr.push(newOb);
}
}
return obArr;
}
第四个函数是一个字符串格式化器，意思是将arCon中的对象格式化成一个可读的字符串，然后存储在一个数组中。
function formatter() {
var strAr = arCon();
var arrayLength = strAr.length;
var formatStr = [];
for (var i = 0; i < arrayLength; i++) {
var str = "Number of characters: " + strAr[i].name + ", Number of words with this length: " + strAr[i].count;
formatStr.push(str);
}
return formatStr;
}
第五个函数被调用用于事件处理程序，意在处理分析按钮的点击。单击时，它意味着获取 div 标签，获取格式化数组，然后循环遍历数组中的每个元素，在其中创建 ap 元素元素，拉出格式化字符串，将 p 元素值设置为格式化字符串，然后追加p 元素到 div 标签。
function analyseButtonClick() {
var div = document.getElementById("output");
var str = formatter();
var arrayLength = str.length;
for (var i = 0; i < arrayLength; i++) {
var par = document.createElement("p");
var format = str[i];
par.value = format;
div.appendChild(par);
}
}
第六个函数是处理按钮点击的init函数。
function init() {
var button = document.getElementById("analyse");
button.onclick = analyseButtonClick;
}
window.onload = init;
我通过验证器运行了这个，它显示没有语法错误，所以它一定是逻辑错误。但是，所有功能似乎都在做它们应该做的事情，所以我不确定我哪里出错了。
edit1：好的，已经用四个新函数替换了第三个函数。一个函数，它返回由 getWordInfo 返回的数组中的最大数字，一个构造名称属性从 2 到该数字的对象的函数，一个更新对象的计数属性的函数，以及一个删除未使用对象的函数。他们在这里：
function maxNum() {
var array = getWordInfo();
var num = Math.max.apply(Math, array);
return num;
}
function objArrCon() { //object array constructor
var num = maxNum();
var array1 = [];
for (var i = 2; i === num; i++) {
var myObj = new objCon(i,0);
array1.push(myObj);
}
return array1;
}
function objArrParse() { //updates the object with word info
var array1 = getWordInfo();
var array2 = objArrCon();
var loopLength1 = array1.length;
var loopLength2 = array2.length;
for (var i = 0; i < loopLength1; i++) {
for (var m = 0; m < loopLength2; m++) {
if (array2[m].name === array1[i]) {
array2[m].count++;
}
}
}
return array2;
}
function objArrTrun() { //removes unused objects
var array1 = objArrParse();
var loopLength = array1.length;
for (var i = 0;i < loopLength; i++) {
if (array1[i].count === 0) {
array.splice(i, array1);
}
}
return array1;
}
还是不行，但我已经到了！
【问题讨论】：
-
你有没有试过在你的 analyseButtonClick 函数中设置一个断点，看看你的变量 str 里面是否真的有任何东西？
-
嗯，它的语法是什么？我没有那么多地处理断点。你是说喜欢/br吗？
-
使用 chrome 开发者工具。在 chrome 中启动您的应用程序，然后单击 F12。导航到 Sources，选择具有 analyseButtonClick 的文件，然后单击左侧（在行号上）以放置断点
-
酷，以前从来没有这样做过
-
或者，您可以在 analyseButtonClick 中添加一个 alert(str) 以查看您拥有的内容...
标签： javascript arrays string html object