我有两个点击函数，addFields 和 addSites 函数利用它们来拉入两个不同的变量并将它们填充到各自动态生成的 html 容器中。 addFields 应该填充“container1”，addSites 应该填充“container2”。但由于某种原因，只有一个容器被填充，即底部的容器 (container2)。
我有预感，这是因为 onClick 函数仅调用其中一个数据检索函数，而我需要它同时执行这两项操作才能填充两个容器(两个容器应同时填充各自的数据)。尽管如此，我不确定如何修复它，而且我不明白为什么它只会填充container2...
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
</head>
<body>
<div class="container">
<p align="justify" style="font-family:helvetica,garamond,serif;font-size:16px;font-style:regular;" class="light">
<b>BigQuery Function</b></p>
<p align="justify" style="font-family:helvetica,garamond,serif;font-size:12px;font-style:regular;" class="light">
Select from the library of popular BigQuery functions to add a sheet or update one that you've already added.</p>
</div>
<div class="row">
</div>
<div class="container">
<hr>
<div class="row">
<input href="#" class="btn blue rounded" id="runQuery" type="button" value=" Get Customer Accounts " />
<div class="container">
<p align="justify" style="font-family:helvetica,garamond,serif;font-size:12px;font-style:regular;" class="light">
Selects all accounts and adds them to a sheet called <b>'All Accounts'</b>.</p>
<div id="container1"></div>
</div>
<hr>
<div class="row">
<input href="#" class="btn blue rounded" id="runQuerySites" type="button" value=" Get Sites " />
<div class="container">
<p align="justify" style="font-family:helvetica,garamond,serif;font-size:12px;font-style:regular;" class="light">
Selects all Sites and adds them to a sheet called <b>'All Sites'</b>.</p>
<div id="container2"></div>
</div>
</div>
</div>
<div id="container"></div>
<div class="row">
<hr>
</div>
<style>
.footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: light-grey;
color: light-grey;
text-align: center;
}
</style>
<div class="footer">
<input href="#" class="btn grey small rounded" id="showSidebarIntro" type="button" value="Return to Intro" />
</div>
</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script type='text/javascript'>
var g_fieldNames;
var g_siteNames;
console.log('calling get variables....');
getFieldNames();
getSiteNames();
function addFields(fieldNames) {
console.log('addFields is running');
// Container <div> where dynamic content will be placed
var container = document.getElementById("container1");
// Clear previous contents of the container
while (container.hasChildNodes()) {
container.removeChild(container.lastChild);
}
// Append a node with a random text
container.appendChild(document.createTextNode("Last update: " + fieldNames));
// Create an <input> element, set its type and name attributes
// Append a line break
container.appendChild(document.createElement("br"));
//add to global for other uses
g_fieldNames = fieldNames;
}
function addSites(siteNames) {
console.log('addFields is running');
// Container <div> where dynamic content will be placed
var container = document.getElementById("container2");
// Clear previous contents of the container
while (container.hasChildNodes()) {
container.removeChild(container.lastChild);
}
// Append a node with a random text
container.appendChild(document.createTextNode("Last update: " + siteNames));
// Create an <input> element, set its type and name attributes
// Append a line break
container.appendChild(document.createElement("br"));
//add to global for other uses
g_siteNames = siteNames;
}
document.getElementById('runQuery').addEventListener('click', function () {
google.script.run
.withFailureHandler(onFailure)
.withSuccessHandler(onSuccess)
.runQuery();
});
document.getElementById('runQuerySites').addEventListener('click', function () {
google.script.run
.withFailureHandler(onFailure)
.withSuccessHandler(onSuccess)
.runQuerySites();
});
document.getElementById('showSidebarIntro').addEventListener('click', function () {
google.script.run
.showSidebarIntro();
});
function getFieldNames() {
google.script.run
.withFailureHandler(onFailure)
.withSuccessHandler(onSuccess)
.BQaccountsUpdate();
console.log('getVariables1 ran!');
}
function getSiteNames() {
google.script.run
.withFailureHandler(onFailure)
.withSuccessHandler(onSuccess)
.BQsitesUpdate();
console.log('getVariables2 ran!');
}
function onSuccess(fieldNames_fromDoc) {
console.log('onSuccess ran!');
addFields(fieldNames_fromDoc);
}
function onSuccess(siteNames_fromDoc) {
console.log('onSuccess ran!');
addSites(siteNames_fromDoc);
}
function onFailure(){
console.log('Failure is just an oppertunity for growth!');
}
</script>
</html>最佳答案
您有一个重复的函数名称，第二个是覆盖第一个:
function onSuccess(fieldNames_fromDoc) {
console.log('onSuccess ran!');
addFields(fieldNames_fromDoc);
}
function onSuccess(siteNames_fromDoc) {
console.log('onSuccess ran!');
addSites(siteNames_fromDoc);
}
第一个定义永远不会保存。您可以简单地重命名第二个函数，然后确保在您想要的位置调用它，即 .withSuccessHandler(onSuccessNewName) 或其他。
关于javascript - HTML 未分别填充多个容器的问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59900318/