I have just recently started programming in JavaScript and I have to create my own wikipedia page using the wikimedia API but can't understand when search is clicked how to pull the data from the text box and display the result.
<!DOCTYPE html>
<html>
<body>
<h1>Wikipedia</h1>
<div id="search1" />
<input type="text" name="search" /></b>
<button id="s1">search</button>
</div>
<p id="display"></p>
<script>
var xmlhttp = new XMLHttpRequest();
var url = "https://community-wikipedia.p.mashape.com/api.php" ;
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
myFunction(xmlhttp.responseText);
}
}
xmlhttp.open("GET", url, true);
var key = "oCdV3MjLj1mshtyIXwBVzBqRKtY9p1XJNiajsn1vsCETYVLwK3";
req.setRequestHeader("X-Mashape-Key", key);
xmlhttp.send();
function Function(response) {
var a = JSON.parse(response);
var i;
text = "";
for(i = 0; i < a.length; i++) {
text += a[i]+ "<br>";
}
document.getElementById("search1").addEventListener("click",displaysearch);
function displaysearch(){
//display search items here
}
}
</script>
</body>
</html>
You could use an iframe in your html that setups after you click the search button, or you can use a jQuery ajax GET call that's sends a call request to the Wikipedia page your accessing and if successful returns back with the appropriate data.
jQuery is probably a better option of the two. (In my opinion)
An alternative could be something like this with iFrames (in javascript):