How to add a variable with a text box to edit it?

36
October 22, 2019, at 11:50 PM

I am trying to add a variable called "tokeninput". I want add a text box to edit this variable.

I was searching for few hours now and didn't find a result.

<script src="https://sdk.scdn.co/spotify-player.js"></script>
 <script>
window.onSpotifyWebPlaybackSDKReady = () => {
const token = '`enter token here`';
const player = new Spotify.Player({
  name: 'Speaker of some sort',
  getOAuthToken: cb => { cb(token); }
 });
</script>

So the expected to be is when I would put a token found on a page and inputed It the player would work.

Thanks in advance EDIT: Thanks to everyone who helped. The finall script worked with the help from the answers.

Answer 1

Do you mean you want to have a textbox in html to adjust the token than call that Spotify.player function?

<html>
 <body> 
   <input type="text" id="token" />
   <script>
      function updateToken(){
           var token = document.getElementById("token");
           // Do whatever with the token here
       }
   </script>
</body>
</html>

This can also be extracted out to it's own js file if that's where all the other spotify api logic is.

Answer 2

You can add the element dynamically using JS like,

var input = document.createElement('input');  
input.type = "text";  
input.placeholder = "enter token here"; 
document.body.appendChild(input);  
input.addEventListener("blur", function(e){ 
// add your code to use token here. 
  alert("token is "+ input.value); 
})

Answer 3

You can use the below code:

<script src="https://sdk.scdn.co/spotify-player.js"></script>
<script>
window.onSpotifyWebPlaybackSDKReady = () => {
const prompt = '`enter token here`';
const token = $('#idOfTokenInput'); // OR document.querySelector('idorClassofInputelement')
const player = new Spotify.Player({
  name: 'Speaker of some sort',
  getOAuthToken: cb => { cb(token); }
 });
 // To update the Token with input change
 $('#idOfTokenInput').keydown(function(event) { 
    token = $('#idOfTokenInput').value;
 }); 
</script>
READ ALSO
Google function returning undefined

Google function returning undefined

I have an issue with a custom google script I'm making to generate a bunch of sheets with info based on other sheetsI can't figure out why this is happening

44
Can I develop Node.js (Express) app in both JavaScript and TypeScript together?

Can I develop Node.js (Express) app in both JavaScript and TypeScript together?

I have Nodejs project (Express REST API) written in JavaScript

37
Account Linking response for Actions On Google not correct in Hindi

Account Linking response for Actions On Google not correct in Hindi

I am making custom Google Action and in my app I am using account linkingThe response for when Google asks the user for confirmation in English is Correct but the same in Hindi is not

16