We are about to switch to a new forum software. Until then we have removed the registration on this forum.
I want to create something like this: https://codepen.io/freeCodeCamp/full/wGqEga.
First when I type something I have to click twice (for some reason) for searches to appear. Then if I type something else and click the button more searches will show but does not erase the previous searches. Idk if I need to use noLoop(), draw(), etc.
Here is my code:
<h1> Wikipedia Viewer </h1>
<p> Welcome to my Wikipedia search tool </p>
<input type="text" id="tf">
<button type="button" id="btn"> Search </button>
<a href="https://en.wikipedia.org/wiki/Special:Random" target="_blank"> /b </a>
var wiki; var input; function setup() { noCanvas(); input = select('#tf'); var btn = select('#btn').mousePressed(search); noLoop(); } function search() { var url = 'https://en.wikipedia.org/w/api.php?action=opensearch&format=json&search='; url += input.value(); loadJSON(url, gotData, 'jsonp'); redraw(); } function gotData(data) { wiki = data; } function draw() { if (wiki) { // console.log(wiki[1].length); for (var i = 0; i < wiki[1].length; i++) { createElement('h1', wiki[1][i]); } } }
Answers
I found out how to remove elements created with p5
Now I need to find out why I need to click button twice to make it work.