问题
Some time ago I put together some lines to generate random colors, all of them under #777777.
→ https://script.google.com/macros/s/AKfycbyXRyJzSUo5wJxhuHliGpL-GPuhKPvZ3mBKtSDZKd4qyxbvIsk/exec
This is the code:
Code.js
function doGet() {
return HtmlService.createHtmlOutputFromFile('Index');
}
Index.html
<!DOCTYPE html>
<html>
<head>
<style>
body{
font-family:CourierNew;
text-align:center;
}
</style>
</head>
<body onload="myFunction()">
<div id="color"></div>
<script>
function myFunction() {
var min = 0;
var max = 77;
var number1 = Math.round(Math.random() * (max - min) + min); var number1 = number1.toString().replace('.0','');
var number2 = Math.round(Math.random() * (max - min) + min); var number2 = number2.toString().replace('.0','');
var number3 = Math.round(Math.random() * (max - min) + min); var number3 = number3.toString().replace('.0','');
if(number1.length==1){var number1 = 0+number1.toString();}
if(number2.length==1){var number2 = 0+number2.toString();}
if(number3.length==1){var number3 = 0+number3.toString();}
var number = number1+number2+number3;
var lines = "<div style='color:#"+number+"'><br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·";
document.getElementById("color").innerHTML = "<div style='background-color:#"+number+"; color:white; font-size:200%; font-weight:bold'>"+number+lines+"</div>";
}
</script>
</body>
</html>
Please tell me how and where to add a link (or button) to run the code again and generate a new random color.
I've tried the following with no success:
<a href="javascript:window.location.href=window.location.href">another color...</a>
<a href="javascript:location.reload();">another color...</a>
<a href="javascript:window.location.reload(true)">another color...</a>
<a href=".">another color...</a>
<a href="">another color...</a>
<a href="https://script.google.com/macros/s/AKfycbyXRyJzSUo5wJxhuHliGpL-GPuhKPvZ3mBKtSDZKd4qyxbvIsk/exec">another color...</a>
<a href="#" onclick="window.location.reload(true);">another color...</a>
<a href="" onclick="window.location.reload(true);">another color...</a>
<a href="javascript:window.location.href=window.location.href">another color...</a>
<a href="javascript:">another color...</a>
<a href="?">another color...</a>
<a href="javascript:history.go(0)">another color...</a>
<a href="!#" onClick="window.location.reload(true);">another color...</a>
<a href="javascript:history.back()">another color...</a>
¶¶¶¶¶ REWRITE ¶¶¶¶¶
After Cooper's help some little changes were made and now it works with something that looks like a link (<div class="another" onClick="myFunction();">color</div> added almost at the end):
Code.gs
function doGet() {
return HtmlService.createHtmlOutputFromFile('Index');
}
Index.html
<!DOCTYPE html>
<html>
<head>
<style>
body{
font-family:CourierNew;
text-align:center;
}
.another{
cursor:pointer;
text-decoration:underline;
}
</style>
</head>
<body onload="myFunction()">
<div id="color"></div>
<script>
function myFunction() {
var min = 0;
var max = 77;
var number1 = Math.round(Math.random() * (max - min) + min); var number1 = number1.toString().replace('.0','');
var number2 = Math.round(Math.random() * (max - min) + min); var number2 = number2.toString().replace('.0','');
var number3 = Math.round(Math.random() * (max - min) + min); var number3 = number3.toString().replace('.0','');
if(number1.length==1){var number1 = 0+number1.toString();}
if(number2.length==1){var number2 = 0+number2.toString();}
if(number3.length==1){var number3 = 0+number3.toString();}
var number = number1+number2+number3;
var lines = "<div style='color:#"+number+"'><br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·";
document.getElementById("color").innerHTML = "<div style='background-color:#"+number+"; color:white; font-size:200%; font-weight:bold'>"+number+'<div class="another" onClick="myFunction();">color</div>'+lines+"</div>";
}
</script>
</body>
回答1:
Try this: html:
<!DOCTYPE html>
<html>
<head>
<style>
body{
font-family:CourierNew;
text-align:center;
}
</style>
</head>
<body onload="myFunction()">
<input type="button" value="Run MyFunction Again" onClick="myFunction();" />
<input type="button" value="Reload Page" onClick="reloadPage();" />
<div id="color"></div>
<script>
function myFunction() {
var min = 0;
var max = 77;
var number1 = Math.round(Math.random() * (max - min) + min); var number1 = number1.toString().replace('.0','');
var number2 = Math.round(Math.random() * (max - min) + min); var number2 = number2.toString().replace('.0','');
var number3 = Math.round(Math.random() * (max - min) + min); var number3 = number3.toString().replace('.0','');
if(number1.length==1){var number1 = 0+number1.toString();}
if(number2.length==1){var number2 = 0+number2.toString();}
if(number3.length==1){var number3 = 0+number3.toString();}
var number = number1+number2+number3;
var lines = "<div style='color:#"+number+"'><br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·<br>·";
document.getElementById("color").innerHTML = "<div style='background-color:#"+number+"; color:white; font-size:200%; font-weight:bold'>"+number+lines+"</div>";
}
function reloadPage(){
google.script.run
.withSuccessHandler(function(url){window.open(url,"_top");})
.getScriptURL();
}
</script>
</body>
</html>
gs:
function doGet() {
return HtmlService.createHtmlOutputFromFile('Index');
}
function getScriptURL() {
var url = ScriptApp.getService().getUrl();
return url ;
}
来源：https://stackoverflow.com/questions/59475342/how-to-reload-a-google-apps-script-web-app-with-a-link