Follow-up after a question about ordering XHR functions It's a recursive situation where sendRequest() is creating a field with an onclick link to itself. This onclick link stores the variable word, that should be fed to sendRequest upon call.
<script type="text/javascript">
function inputReq(){
sendRequest(wordform.word.value)
}
function sendRequest(str){
//we start by removing the now superfluous rows
table=document.getElementById('table')
while(table.rows.length>2){
table.deleteRow(2);
}
var request = new XMLHttpRequest();
console.log('sending request');
request.open('GET', 'http://127.0.0.1:5000/api.html?query='+str, true);
request.onreadystatechange = function() {
if (request.readyState == 4) {
json=request.responseText;
console.log(json);
//json.forEach(function(obj) {
//});
for (word in json){
var row=table.insertRow();
var scoreC=row.insertCell();
var wordC=row.insertCell();
scoreC.innerHTML=json[word];
wordC.innerHTML=word;
wordC.onclick=(function(i) {sendRequest(i);})(word);
}
} else {
console.log("Silence on the line");
}
}
request.send();
}
</script>
<!DOCTYPE html>
<html>
<head>
<title>Query Page</title>
</head>
<body>
<h1>Query Page</h1>
<table id='table' style="width:100%">
<tr><form name='wordform'>
<th>Concept: <input type="text" name="word"></th>
<th><input type="button" onclick="inputReq()" value='Find Associations'></th>
</form></tr>
</body>
</html>
The XHR response looks like this:
{"milk": 1, "cheese": 3, "bread": 2}
I have been following this schema but this line is calling the function instead of adding the onclick link:
wordC.onclick=(function(i) {sendRequest(i);})(word);
