gpt4 book ai didi

javascript - 使用 JavaScript 和 Google API : , 从列表事件中获取用户选择的输入

转载 作者:行者123 更新时间:2023-12-03 03:06:33 32 4
gpt4 key购买 nike

首先我要说的是,我是一个完全的新手,所以如果这是一个显而易见的答案,那么我提前道歉,但在花了大约一周的搜索后我找不到任何东西。

我目前正在使用 Google Calendar API 设计一个应用程序,该应用程序使用 JavaScript 列出用户选择的特定日期的事件。我已经启动并运行了 Google 的快速入门文档,目前正在对其进行编辑以了解其工作原理。

基本上我已经用 HTML 设计了一个表单,我尝试使用 JavaScript 来获取元素并使用它们向 google 提交必要的参数。现在我只是想让它接受来自以下位置的输入数据:

<label>Date: </label>
<input type="date" id="dateFirst" name="dateFirst">

进入这里:

function listUpcomingEvents() {
gapi.client.calendar.events.list({
'calendarId': 'primary',
'timeMin': (new Date()).toISOString(),
'showDeleted': false,
'singleEvents': true,
'maxResults': 50,
'orderBy': 'startTime'
}).then(function(response) {
var events = response.result.items;
appendPre('Upcoming events:');

我知道它需要进入“timeMin”部分,并且我可能还需要分配一个“timeMax”,但我已经尝试了几种这样的格式

(new Date(inputDate)).toISOString()

所有这些最终都只是破坏了脚本。

我尝试创建一些新变量,使用 getElementById 方法将信息提取到 listUpcomingEvents() 函数中,但这似乎没有帮助。下面列出了这些变量:

var inputDate = document.getElementById('dateFirst');
var inputLogin = document.getElementById('myText');
var inputPassword = document.getElementById('myPwd');
var inputName = document.getElementById('senName');

我完全迷失了,在让它工作之前我还有很长的路要走,我仍然需要让它接受来自标签的登录信息,但我想尝试在让它仅列出选定日期的事件方面取得一些进展。

我走在正确的道路上吗?任何意见/帮助/指导将不胜感激。预先感谢您。

您可以在下面找到完整的代码:

    <!DOCTYPE html>

<html>

<head>
<title>Calendar Card Test</title>
<meta charset='utf-8' />
<link rel="stylesheet" type="text/css" href="test.css" />
</head>

<body>
<p id="testName">JavaScript Test Calendar</p>

<div>
<form id="topInput">
<fieldset>
<legend>Text input</legend>
<p>
<label>Login: </label>
<input type="text" id="myText" value="Login info here" />
</p>
<p>
<label>Password: </label>
<input type="password" id="myPwd" value="secret" />
</p>
<p>
<label>Date: </label>
<input type="date" id="dateFirst" name="dateFirst">
</p>
<p>
<label>Name: </label>
<input type="text" id="senName" value="Name" />
</p>

</fieldset>
</form>
</div>


<!--Add buttons to initiate auth sequence and sign out-->

<input type="submit" value="Log in" id="authorize-button">
<input type="submit" value="Sign-Out" id="signout-button">
<pre id="content"></pre>

<script type="text/javascript">
// Client ID and API key from the Developer Console
var CLIENT_ID = 'CIENT_ID';

// Array of API discovery doc URLs for APIs used by the this application
var DISCOVERY_DOCS = ["https://www.googleapis.com/discovery/v1/apis/calendar/v3/rest"];

// Authorization scopes required by the API; multiple scopes can be
// included, separated by spaces.
var SCOPES = "https://www.googleapis.com/auth/calendar.readonly";

var authorizeButton = document.getElementById('authorize-button');
var signoutButton = document.getElementById('signout-button');

// Set variables to get data from <input> tags
var inputDate = document.getElementById('dateFirst');
var inputLogin = document.getElementById('myText');
var inputPassword = document.getElementById('myPwd');
var inputName = document.getElementById('senName');


/**
* On load, called to load the auth2 library and API client library.
*/
function handleClientLoad() {
gapi.load('client:auth2', initClient);
}

/**
* Initializes the API client library and sets up sign-in state
* listeners.
*/
function initClient() {
gapi.client.init({
discoveryDocs: DISCOVERY_DOCS,
clientId: CLIENT_ID,
scope: SCOPES
}).then(function() {
// Listen for sign-in state changes.
gapi.auth2.getAuthInstance().isSignedIn.listen(updateSigninStatus);

// Handle the initial sign-in state.
updateSigninStatus(gapi.auth2.getAuthInstance().isSignedIn.get());
authorizeButton.onclick = handleAuthClick;
signoutButton.onclick = handleSignoutClick;
});
}

/**
* Called when the signed in status changes, to update the UI
* appropriately. After a sign-in, the API is called.
*/
function updateSigninStatus(isSignedIn) {
if (isSignedIn) {
authorizeButton.style.display = 'none';
signoutButton.style.display = 'block';
listUpcomingEvents();
} else {
authorizeButton.style.display = 'block';
signoutButton.style.display = 'none';
}
}

/**
* Sign in the user upon button click.
*/
function handleAuthClick(event) {
gapi.auth2.getAuthInstance().signIn();
}

/**
* Sign out the user upon button click.
*/
function handleSignoutClick(event) {
gapi.auth2.getAuthInstance().signOut();
}

/**
* Append a pre element to the body containing the given message
* as its text node. Used to display the results of the API call.
*
* @param {string} message Text to be placed in pre element.
*/
function appendPre(message) {
var pre = document.getElementById('content');
var textContent = document.createTextNode(message + '\n');
pre.appendChild(textContent);
}

/**
* Print the summary and start datetime/date of the next ten events in
* the authorized user's calendar. If no events are found an
* appropriate message is printed.
*/

function listUpcomingEvents() {
gapi.client.calendar.events.list({
'calendarId': 'primary',
'timeMin': (new Date(inputDate)).toISOString(),
'showDeleted': false,
'singleEvents': true,
'maxResults': 50,
'orderBy': 'startTime'
}).then(function(response) {
var events = response.result.items;
appendPre('Upcoming events:');

if (events.length > 0) {
for (i = 0; i < events.length; i++) {
var event = events[i];
var when = event.start.dateTime;
if (!when) {
when = event.start.date;
}
appendPre(event.summary + ' (' + when + ')')
}
} else {
appendPre('No upcoming events found.');
}
});
}
</script>
<script async defer src="https://apis.google.com/js/api.js" onload="this.onload=function(){};handleClientLoad()" onreadystatechange="if (this.readyState === 'complete') this.onload()">
</script>
</body>

</html>

最佳答案

使用 document.getElementById() 函数,您的方向是正确的。你已经很接近了!

document.getElementById() 返回具有该 id 属性的元素。文本框和文本区域元素具有 value 属性,该属性将从文本框中返回用户的输入。

您需要进行的更改很简单:

var inputDate = document.getElementById('dateFirst').value;
var inputLogin = document.getElementById('myText').value;
var inputPassword = document.getElementById('myPwd').value;
var inputName = document.getElementById('senName').value;

Here is some further reading from w3schools .

关于javascript - 使用 JavaScript 和 Google API : , 从列表事件中获取用户选择的输入,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47141054/

32 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com