Function Not Defined - a Question about Variable Scope

I’ve cobbled together some code like an illiterate pig farmer, but I’m having trouble with “function not defined” and I suspect it’s happening because of variable scope.

The likely reasons:

I don’t know how to properly insert a variable inside a URL string to add a header.

Also probably not correct syntax on adding a variable I would like to represent an entire URL to an API fetch call.

And there’s probably an easier way to define the “screen_name” variable in the fetch function without this ‘cut and paste’ approach. Open to a better way like Eddie Vedder…

Le Code:

<!DOCTYPE html>
<html>

<body style="text-align:center;">
	<h1 style="color:Black;">
			Hidden Portal to the Mint
	</h1>
	<h2>Are you one of the Forces?</h2>
	<p>
		Check Twitter Username Below
	</p>
  
	<input type="text" id="twiText" value="@WhoDis?">
	<button type="button" id=twiButt onclick="twiFunc(); hookUP(); apiSend();">Send</button>
	<p id="demo"></p>
		
	<script>
    
	// Two functions -  twiFunc and apiSend.

	//twiFunc converts the text input to new variable twiHan
   	// and appends the API URL accordingly
	//variable urlString created adding twiHan between urlBEG and urlEnd to the Twitter API fetch url.

	var urlBEG = "https://api.twitter.com/1.1/friendships/lookup.json?screen_name=”;
	var twiHan = “”;
	var urlEND = “&oauth_consumer_key=...&oauth_token=...-...&oauth_signature_method=HMAC-SHA1&oauth_timestamp=1661985353&oauth_nonce=agFimxv5MRw&oauth_version=1.0&oauth_signature=JryUeZuz0GF9OxY3PMPlR2RdXtA%3D", requestOptions)”;
	var urlString =  urlBEG + urlBEGG + twiHan + urlEND;

	function twiFunc() {
		twiHan = document.getElementById("twiText").value;
		document.getElementById("demo").innerHTML = twiHan;
    }

	function apiSend() { 

var myHeaders = new Headers();
myHeaders.append("Cookie", "guest_id=v1%3A166156211780027632");
var requestOptions = {
  method: 'GET',
  headers: myHeaders,
  redirect: 'follow'
};

fetch("urlString", requestOptions)
  .then(response => response.text())
  .then(result => console.log(result))
  .catch(error => console.log('error', error));
}

var followed_by = response["connections"].includes("followed_by");

console.log(followed_by);
console.log(urlString);

</script> 
</body>

</html>

Any pointers appreciated, feels like I’m zeroing in on my functionality!

This function isn’t defined.

However, the way you’re calling this:

Won’t work. You will not be able to make calls like this client side in javascript because of a lack of CORS support. Also, this potentially reveals your secret keys, which is not something you want. Also, the oauth_timestamp will be invalid, and so will the signature if you do it this way.

You need a server side component, that will make calls to the API, and on the HTML page, it should make calls to your server, not directly to twitter. Something like this could be the start of it: Rest Api

Host is Wix. Claim they support fetch() front end and back. I’m looking into the docs right now. Going to run a test.

In the meantime, my other questions remain.

Looks like I can use concact() to concatenate the string (was missing that term.) Or is there another way to assign that value before whatever server executes the javascript?

thanks!

The main issue is that you shouldn’t be doing this in javascript in the client side at all, you should be using an oAuth library on the server side to sign and generate requests to the Twitter API. I’m not sure Wix supports server side code, so you may have to find an alternative. I thin it would work if you make a Glitch app: https://glitch.com/ that would give you something you can edit live and it’ll already work with a server component and an interface.

For some more examples, this uses v2 API but the same approach could work with v1.1 if you modify it https://github.com/twitterdev/Twitter-API-v2-sample-code/blob/main/User-Lookup/get_users_with_user_context.js you can also remove most of the authentication code, since you already have an access token and secret.

This is what Wix documentation reports about fetch. Still do not grok where the javascript file lives inside the front end/back end duality.

I’m looking into their docs now.

I’m not familiar with wix, but it looks like some sort of restricted implementation that may or may not work - so i don’t know.