尝试在p5.js中调用多行字符串时出现TypeError [英] Getting TypeError when trying to call multiline string in p5.js

问题描述

我一直在努力寻找一种解决方案，以采用单行句子(在我的代码中称为语句")并将其变成我的草图上的多行句子.这个问题直接与我发布的另一个问题有关SO ，因此有人要求我将此新问题发布为新问题. 来自 @KevinWorkman 让我明白了这一点.但是，正在发生的是，当我尝试运行该程序时得到了TypeError: Cannot read property 'display' of undefined.草图已加载，但是当我在草图中单击以开始动画时，出现该错误.我认为这是因为我原来的statements[]数组现在不再是可以在我的draw()函数中调用的类型.但是我不了解问题到底是什么，我已经浏览了所有的JS和p5.js参考文献，但是找不到解决方案.

I've been trying to work out a solution for taking single-line sentences (which I call "statements" in my code) and turning them into multiline sentences on my sketch. This question relates directly to another question I posted on SO, and I have been asked to post this new issue as a new question. The solution from @KevinWorkman got me the to this point. What's happening, though, is that I'm getting a TypeError: Cannot read property 'display' of undefined when I try to run the program. The sketch loads, but when I click within the sketch to start the animation, I get that error. I think it's because my original statements[] array is now no longer of a type that can be called in my draw() function as it is. But I'm not knowledgeable enough to know what the issue is and I've looked through all of my JS and p5.js references and can't find a solution.

我正在发布我的完整代码，以提供一个最小，完整，可验证的示例.尽管事实如此，但作为作家，我发现最小"和完整"是矛盾的术语，因此，非常令人困惑，这是这样的:

I'm posting my complete code in an effort to provide a minimal, complete, verifiable example. Despite the fact, as a writer, I find "minimal" and "complete" to be contradictory terms and, therefore, very confusing, here goes:

var clContext;
var speed = 0.8;
var statements = [];
var canvas;

//load the table of Clinton's statements and their polarity
function preload() {
  clContext = loadTable("cl_context_rev.csv", "header");
}

function setup() {
  canvas = createCanvas(680, 420);
  canvas.mousePressed(inWidth);
  background(51);
  noStroke();
  // iterate over the table rows called in 'preload()' from .csv file
  for (var i = 0; i < clContext.getRowCount(); i++) {
    var statement = clContext.get(i, "statement");
    var polarity = clContext.get(i, "polarity");
    }
    statements[i] = new Statement(polarity, statement);
  }

function draw() {
  if (mouseIsPressed) {
    background(51);
    for (var i = 0; i < statements.length; i++) {
      statements[i].display();
    }
  }
}

// Function to align statements, categories, and polarity
function Statement(polarity, statement) {
  // Break up single-line statements in order to display as multiline
  this.statement = split(statement, "<br>");
  this.polarity = polarity;
  this.x = random(width);
  this.y = random(height);
  this.dx = random(-speed, speed);
  this.dy = random(-speed, speed);
}
// Attach pseudo-class methods to prototype;
// Maps polarity to color and x,y to random placement on canvas
Statement.prototype.display = function() {
  this.x += this.dx;
  this.y += this.dy;

// Make statements reappear if they move off of the sketch display
  if(this.x > width+10){
    this.x = -10
  }
  if(this.y > height+10) {
    this.y = -10
  }
// Map positive/negative statements to colors
  if(this.polarity == -1){
    fill(229,121,59);
  }
  else if(this.polarity == 1){
    fill(97,93,178);
  }
  textSize(14);
  // Was directed to add both 'text' statements
  text(this.statement[0], this.x, this.y);
  text(this.statement[1], this.x, this.y+25);
}

// Create functions for hiding and showing statements
function inWidth() {
  width = width+5;
};  

注意:

console.log(typeof this.statement[0])  // returns 'undefined'
console.log(typeof this.statement[1])  // returns 'undefined'
console.log(split(statement, "<br>"))  // returns 'undefined'  

console.log(statements) // returns 'object'
console.log(statements.length) // returns 20

推荐答案

 for (var i = 0; i < clContext.getRowCount(); i++) {
  var statement = clContext.get(i, "statement");
  var polarity = clContext.get(i, "polarity");
 }
 statements[i] = new Statement(polarity, statement);

我认为这里的最后一行应该在for循环内，以便您执行所需的操作.

I think the last line here should be inside the for loop for this to do what you want.

您的错误意味着您试图在一个未定义的值上调用display()方法.当您循环语句数组时，调用display()方法的唯一位置是在draw()函数内部.这意味着在某一时刻，您的语句数组包含一个未定义的值.您可以通过控制台记录阵列来验证这一点.

Your error means that you are trying to call the display() method on a value that's undefined. The only place you are calling the display() method is inside your draw() function, when you loop through the statements array. This means that at one point your statements array contains an undefined value. You can verify this, by console logging the array.

我怀疑您拥有未定义值的原因是，当您尝试填充setup()函数中的statements数组时，在for循环完成之后，您仅调用一次statements[i] =.此时，i的值与for循环结束时的值相同，因此，您的statements数组将成为一个数组，其中第i个元素就是您设置的值，所有先前的元素都是未定义的.

I suspect the reason why you have undefined values, is because when you attempt to fill up the statements array in the setup() function, you only call statements[i] = once, after your for loop has finished. At this point the value of i is whatever it was at the end of the for loop, therefore your statements array becomes an array, where the i-th element is whatever you've set it, all the previous elements are undefined.

正确的代码:

 for (var i = 0; i < clContext.getRowCount(); i++) {
  var statement = clContext.get(i, "statement");
  var polarity = clContext.get(i, "polarity");
  statements[i] = new Statement(polarity, statement);
  // OR statements.push(new Statement(polarity, statement));
 }

作为一种通用的JavaScript编码样式原理，对Array.push()也是一个好主意，而不是直接分配以将项目添加到数组中.

As a generic JavaScript coding style principle it's also a good idea to Array.push() instead of direct assignment to add items to an array.

这篇关于尝试在p5.js中调用多行字符串时出现TypeError的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！