Is it possible to get a random sentence from a Google Sheet and showing it on my website when someone click a button?答案

【问题标题】：Is it possible to get a random sentence from a Google Sheet and showing it on my website when someone click a button?Is it possible to get a random sentence from a Google Sheet and showing it on my website when someone click a button?
【发布时间】：2022-12-02 07:50:12
【问题描述】：

I am at starting web dev, already using html/css.

For a little project, i will have a look at Javascript.My goal is that when people click a button, the site will show a random sentence that will be taken from a google sheet cell.

Could you tell me please if it is even possible ? If yes, please share some ideas that i will explore. If not, please give me some alternative ideas... Thanks so much.

Have a good day LeganV9

【问题讨论】：

IMO, this might not be the best project for a beginner. If you are still determined, you might be able to do this with this API.

标签： javascript

【解决方案1】：

Welcome to the world of web development! Hope your project is a success.

It should definitely be possible, since Google Sheets offers an API which has read/write functionality (https://developers.google.com/sheets/api).

You could even later extend this so people can submit their own sentences, given that writing to a Google Sheet is also possible with this API.

However, since you're starting out, consider treating this as an iterative process. You don't have to publish your first version, but just to prevent overwhelming yourself, you might want to set small milestones along the way - each adding more functionality. For example:

Create an array of random sentences (you could, for example, start with using this to keep it simple: https://github.com/JamesFT/Database-Quotes-JSON).
Select and log a random sentence to the console (console.log()) each time the script is executed.
Transfer the random sentence to render in HTML and allow a new sentence to be generated each time a button is pressed.
Move your sentences into a Google Sheet and begin exploring the API.
This way, you achievesomethingin a much shorter space of time, while working towards your end goal. It's a good way to keep motivated and make things more manageable.

Best of luck!

【讨论】：

Hello, thank you so much ! i will look at your steps, and tell you how it goes. I am totally new to Javascript so it will take a bit of time aha. Wish you a beautiful day :)

【解决方案2】：

This is possible using Google Apps Script! I have a working demo here, with the source being here. I dare you to get the jackpot. :D In order to make this, you can go to https://script.new. Now, in code.gs put this:

function doGet() {
  return HtmlService.createTemplateFromFile("index").evaluate().setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
}
function getVals(){
  var ss = SpreadsheetApp.openByUrl("https://docs.google.com/spreadsheets/d/1IDbhQhaImcQB-4j-iByajwAkvxkutptcPMhMTxNrPtU/edit#gid=0");//Put your URL here
var sheet = ss.getSheetByName("Sheet1");//Put your sheet name here
var AMOUNT_OF_SENTENCES = sheet.getMaxRows().toString().replace(".0","");//You can replace this with a number eg 20
var range = sheet.getRange(1, 1,AMOUNT_OF_SENTENCES);
var values = range.getValues();
var newValues = [];
for(var i = 1; i<values.length;i++){
  if(values[i][0] === "" || values[i][0] === " "){
  }else{
    newValues.push(values[i][0]);
  }
}
return {valuesVar: newValues };
}

After that, create a new HTML file called "index" and put this in it:

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
  <h1>
  The results are: <span id = "results">Loading...</span>
  </h1>
  <button id = "yourIdHere">Click me!!</button>
    <script>
var yourDataList;
function onSuccess(data) {
yourDataList= data.valuesVar;
}
google.script.run.withSuccessHandler(onSuccess).getVals();
var myBtn = document.querySelector("#yourIdHere"); //Declare button, replace yourIdHere with your ID
var randomNum = 0; //Decclre random number
function getRandom() { //Declare your function
  randomNum = parseInt(Math.random() * yourDataList.length); //Get random number between 0 and the length of your datalist
  return yourDataList[randomNum]; //Return your value
}
myBtn.addEventListener("click", function() { //Bind a listener to the button
  document.querySelector("#results").innerText = getRandom(); //Do whatever you want to with the random value
});
document.querySelector("#results").innerText = getRandom();//Change from loading...
</script>
  </body>
</html>

【讨论】：