Question

该程序应该从给定的API输出歌词。当在按“提交”按钮之前将歌曲和艺术家手动设置为变量时，此方法有效。但是，我意识到在接受用户输入的歌曲时，它不起作用，因为JSON加载位于安装程序内部，安装程序甚至在给出输入之前就已加载。我将如何解决这个问题？我已经尝试为loadJSON创建另一个函数，但是它仍然无法正常工作。

预期的输出应该是当您按下Submit时，应该产生用户的歌曲（我将稍后处理艺术家的输入）的歌词。谢谢！

var search, button, question, input;
var artist = 'One%20Direction/';
var song = 'Taken';
var url_root = 'http://lyric-api.herokuapp.com/api/find/'

function setup() {
  noCanvas();

  input = createInput ();
  input.position (20, 50);

  button = createButton ("Submit");
  button.position(input.x + input.width, 50);
  button.mousePressed(goSearch);

  var url = url_root + artist + song;
  loadJSON (url, gotData);

  question = createElement ('h2', 'Search a song:');
  question.position(20, 5);

}

function gotData(data) {
  search = data;
}

function goSearch() {
    var thing = search.lyric
    var result = createP(thing);
    result.position (20, 60);
}

Answer 1

我相信以下内容将为您提供帮助。总结：

添加input.value()以获得用户的输入值
较小的功能重构

var search, button, question, input;
var artist = 'One%20Direction/';
var url_root = 'http://lyric-api.herokuapp.com/api/find/'

// Page setup
function setup() {
  noCanvas();

  input = createInput ();
  input.position (20, 50);

  button = createButton ("Submit");
  button.position(input.x + input.width, 50);
  button.mousePressed(goSearch);

  question = createElement ('h2', 'Search a song:');
  question.position(20, 5);
}

// When data is returned, lets display it
function gotData(data) {
  search = data;
  var thing = search.lyric
  var result = createP(thing);
  result.position (20, 60);
}

// Perform request when user submits search term
function goSearch() {
  var song = input.value(); // Get the form field's input value
  var url = url_root + artist + song;
  loadJSON (url, gotData);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.2/p5.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.2/addons/p5.dom.js"></script>

对API抓取程序的用户输入进行故障排除

1 个答案: