Google Apps 脚本 - 表单输入未正确提交

Question

<form id="colours" onsubmit="doSomething()">
  <label for="startcolour" style="font-family:arial">Start:</label>
  <input type="color" name="startcolour" id="startcolour" value="#123456"> &nbsp;
  <label for="endcolour" style="font-family:arial">End:</label>
  <input type="color" name="endcolour" id="endcolour" value="#abcdef"><br><br>
  <br>
  <input type="submit" value="Submit">
</form>

<script>
  var startcolour = document.getElementById("startcolour").value;
  var endcolour = document.getElementById("endcolour").value;

  function doSomething() {
    google.script.run.withFailureHandler(function(error) {
      console.log("error")
      console.log(error.message)
    }).withSuccessHandler(function(result) {
      console.log("done!")
    }).test(startcolour);
  }
</script>

I have a Google Apps Script HTML sidebar. This is some of the code for the HTML sidebar. When I enter a colour and press 'Submit', I want it to run the test() function with the submitted value for startcolour as the input. However, it runs with '#123456', the default value, not the value the user submitted. How do I fix this?

Answer 1

The problem is that you are defining the "startcolour" and "endcolour" variables from outside of your doSomething function, so when that function is called, it uses the value that was defined when the page was loading, instead of a value that you could define when the form is being submitted.

The solution would be to define the variables "startcolour" and "endcolour" within your doSomething function.