如何从HTML页面获取Code.GS文件中的文本框值
问题描述:
我有一个电子表格并正在编写与Twitter API集成的代码。在我的表,我有两个文件:如何从HTML页面获取Code.GS文件中的文本框值
- Code.gs
- settingpage.html
我有code.gs即CONSUMER_KEY,CONSUMER_SECRET一些全局变量。当用户在文本框中输入一个值并点击保存按钮时,我想设置这两个变量。
文本框放在边栏下。使用(HtmlService.SandboxMode.IFRAME)从settingspage.html生成补充工具栏
让我知道如果我做错了,或者以任何其他方式设置用户输入的全局变量值。
Code.gs
CONSUMER_KEY = "Your key value";
CONSUMER_SECRET = "Your key value";
function onOpen() {
var ui = SpreadsheetApp.getUi();
ui.createMenu('BOT')
.addItem('Setting-config','fnShowSidebar')
.addItem('Start', 'StartCP')
.addSeparator()
.addItem('Stop', 'StopCP')
.addToUi();
}
function fnShowSidebar() {
var html = HtmlService.createHtmlOutputFromFile('settingpage')
.setSandboxMode(HtmlService.SandboxMode.IFRAME)
.setTitle('Welcome to TwitterBot-RWT!')
.setWidth(300);
SpreadsheetApp.getUi() // Or DocumentApp or FormApp.
.showSidebar(html);
}
settingpage.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">
<style>
.centerAlign {
vertical-align: middle;
width:80%;
margin-top:10px;
}
.branding-below {
bottom: 56px;
top: 0;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$("#btn_save").click(function(){
google.script.run.withSuccessHandler(onSuccess).fn_setCustomValue();
});
function onSuccess(){
// Logger.log("Success!");
}
</script>
</head>
<body>
<div class="block form-group">
<label for="city">CONSUMER_KEY</label>
<input id="txt_CONSUMER_KEY" type="text" value="" style="width: 150px;" />
</div>
<div class="block form-group">
<label for="city">CONSUMER_SECRET</label>
<input id="txt_CONSUMER_SECRET" type="text" value="" style="width: 150px;">
</div>
<div class="block">
<button id="btn_save" class="create">Save</button> <button>Cancel</button>
</div>
</body>
</html>
编辑:
个HTML
<button id="btn_save" class="create">Save</button>
<button>Cancel</button>
</div>
JS:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(function() {
var buttonEl=document.getElementById("btn_save");
buttonEl.addEventListener("click", myFunction);
function myFunction() {
alert ("Hello World!");
var keyValue=document.getElementById("txt_CONSUMER_KEY").value;
var secretValue=document.getElementById("txt_CONSUMER_SECRET").value;
google.script.run.withSuccessHandler(onSuccess).fn_setCustomValue(keyValue,secretValue);
}
function onSuccess(){
Logger.log("Success!");
}
});
</script>
答
,你可以用document.getItemById()做到这一点。 东西沿着线:
google.script.run.withSuccessHandler(onSuccess).fn_setCustomValue(document.getElementById("txt_CONSUMER_KEY").value, document.getElementById("txt_CONSUMER_SECRET").value);
随着fn_setCustomValue()内Code.gs是沿着我想你所说
function fn_setCustomValue(key, secret){
CONSUMER_KEY = key;
CONSUMER_SECRET = secret;
}
线的东西,但仍然是其现在的工作。而不是使用document.getItemId(“”)已使用document.getElementbyId(“”)现在仍然解决。那么在按钮上单击我打开一个新选项卡请检查屏幕截图上面已添加 –
您是对的,当然它会是getElementById。值是属性不是元素的方法,如果删除括号会发生什么?对不起,我在我的手机上写了这篇文章,并没有仔细检查 –
使用getElementById()后,它仍然无法正常工作。点击按钮打开一个新标签,如上图所示屏幕截图 –