Question

我发现与我所寻找的最接近的是：Making a confirm box 不幸的是，我无法使其完全按照我想要的或我不理解的方式工作。我是Java / Javascript和HTML的新手。我正在使用Google脚本为Google表格创建自定义用户界面，以使捕获输入所需的用户友好。我一直试图在验证代码中包含自定义确认。为了测试它，我只是用下面的代码创建了一个简单的Web应用程序：（我创建了一些Psuedo代码，并在下面的代码中的myFunction函数中将其注释掉了）

function doGet(){
  var template = HtmlService.createTemplateFromFile('Basic'); 
  return template.evaluate()
      .setTitle('Example App')
      .setSandboxMode(HtmlService.SandboxMode.IFRAME);    
}

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
        <!--Import Google Icon Font-->
      <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
      
      <!-- Compiled and minified CSS -->
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

      <!--Let browser know website is optimized for mobile-->
      <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <style>
    .confirmBox {
      display: none;
      background-color: rgba(0, 0, 0, 0.40);
      border: 1px solid #ddd;
      position: fixed;
      -webkit-transition: -webkit-box-shadow .25s;
      transition: -webkit-box-shadow .25s;
      transition: box-shadow .25s;
      transition: box-shadow .25s, -webkit-box-shadow .25s;
      border-radius: 2px;
      width: 250px;
      left: 50%;
      margin-left: -100px;
      padding: 6px 8px 8px;
      box-sizing: border-box;
      text-align: center;
      color: #ffffff;
      font-size: 24px;
      z-index:99;
    }
      
    .confirm .message {
      text-align: left;
    }
  </style>
  </head>
  <body>
    <div id="cfrmBox" class="confirmBox">
      <div id="cfrmBoxMsg" class="message"></div>
      <button id="idYesButton" class="btn waves-effect waves-light z-depth-5" >Yes</button>
      <button id="idNoButton" class="btn waves-effect waves-light z-depth-5" >No</button>
    </div>
    
    <div class="container">
      <div class="row">
        <div class="col s12">
          <br><br>
          <div class="card">
            <div class="card-image">
              <span class="card-title">Timer</span>
                <a class="btn-floating halfway-fab waves-effect waves-light teal z-depth-5 tooltipped"
                   data-position="top"
                   data-tooltip="Press to start and stop timer" onclick="startStopTimer()">
                <i id="idStopWatch" class="large material-icons">access_time</i></a>
            </div>
            <div id ="idCardContent" class="card-content" style="color: #4db6ac;
                                                                 font-weight: bold;
                                                                 font-weight: 150%">
              <p id = "idCardContentP">04:10:24</p>
            </div>
          </div> 
           
          <button class="btn waves-effect waves-light z-depth-5" id="btnNextTask" onclick="myFunction()">Next Task
            <i class="material-icons right">music_note</i>
          </button>
        </div> <!-- END col END -->
      </div> <!-- END row END -->
    </div> <!-- END Container -->
        
    <!-- Compiled and minified JavaScript -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"> </script>
  <script>
  
    function appearNow(tMessage){
      var x = document.getElementById('cfrmBoxMsg');
      x.innerHTML = tMessage;
      var y = document.getElementById('cfrmBox');
      y.style.display = "inline";
    }
    
    function myFunction() {
      var stTime = document.getElementById('idCardContentP').innerHTML;
      if (stTime != "") {
        //Had function left in front. Corrected 
        appearNow('Do you want to save your time for this task?')
        
        // This is where I want to capture if the 'yes' or 'no' button was pressed
        //Psuedo code below
        /*
        if(document.getElementById('idYesButton').click == true){
          y.style.display = "none";
          M.toast({html: 'You clicked YES and time has been saved and here is the next task'});
        } else {
          y.style.display = "none";
          M.toast({html: 'You clicked NO and we will do nothing'});
        }
        */
        //Continue with more validation code
        
      } else {
        M.toast({html: 'Since the timer has not started you can freely move to the next task'});
      }
    }
  
    function startStopTimer() {
      M.toast({html: 'Timer is hard coded to be greater than 0 for testing!'});
    }
  </script>
  </body>
</html>

非常感谢您的帮助。

Answer 1

如果要创建一个函数来执行一组特定验证的语句在这个世界上真的不可行，这似乎就像是嵌套的，因为一旦调用了一个函数，它必须完成，除非调用内置的confirm（），实用但很丑。因此，我不得不重新考虑自己的逻辑路线，意识到要做我想做的事情，并拥有一个自定义确认框，我无法使其成为一个很好的可重用，整洁的功能。我必须为每个验证创建一个单独的函数，并创建一个新的'

<div id="cfrmBox" class="confirmBox">

每次我想使用

'时，都使用每次调用特定于该验证的“ onclick”按钮来调用特定功能。我认为，这会使代码变得庞大。但是，它有效。

function doGet(){
  var template = HtmlService.createTemplateFromFile('Basic'); 
  return template.evaluate()
      .setTitle('Example App')
      .setSandboxMode(HtmlService.SandboxMode.IFRAME);    
}

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
        <!--Import Google Icon Font-->
      <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
      
      <!-- Compiled and minified CSS -->
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

      <!--Let browser know website is optimized for mobile-->
      <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <style>
    .confirmBox {
      display: none;
      background-color: rgba(0, 0, 0, 0.40);
      border: 1px solid #ddd;
      position: fixed;
      -webkit-transition: -webkit-box-shadow .25s;
      transition: -webkit-box-shadow .25s;
      transition: box-shadow .25s;
      transition: box-shadow .25s, -webkit-box-shadow .25s;
      border-radius: 2px;
      width: 250px;
      left: 50%;
      margin-left: -100px;
      padding: 6px 8px 8px;
      box-sizing: border-box;
      text-align: center;
      color: #ffffff;
      font-size: 24px;
      z-index:99;
    }
      
    .confirm .message {
      text-align: left;
    }
  </style>
  </head>
  <body>
    <div id="cfrmBox" class="confirmBox">
      <div id="cfrmBoxMsg" class="message"></div>
      <button id="idYesButton" class="btn waves-effect waves-light z-depth-5" value="yes" onclick="confirmYesNo(this.value)">Yes</button>
      <button id="idNoButton" class="btn waves-effect waves-light z-depth-5" value="no" onclick="confirmYesNo(this.value)">No</button>
    </div>
    
    <div id="idContainer" class="container">
      <div class="row">
        <div class="col s12">
          <br><br>
          <div class="card">
            <div class="card-image">
              <span class="card-title">Timer</span>
                <a id="idStopWatchBtn" class="btn-floating halfway-fab waves-effect waves-light teal z-depth-5 tooltipped"
                   data-position="top"
                   data-tooltip="Press to start and stop timer" onclick="startStopTimer()">
                <i id="idStopWatch" class="large material-icons">access_time</i></a>
            </div>
            <div id ="idCardContent" class="card-content" style="color: #4db6ac;
                                                                 font-weight: bold;
                                                                 font-weight: 150%">
              <p id = "idCardContentP">04:10:24</p>
            </div>
          </div> 
          
          <div class="row">
            <div class="col s12">
              <div id="idCardPanel" class="card-panel teal">
                <span id="idCardPanelSpan"class="white-text">Task 1: Do something fun
                </span>
              </div>
            </div>
          </div>
            
          <button class="btn waves-effect waves-light z-depth-5" id="btnNextTask" onclick="myFunction()">Next Task
            <i class="material-icons right">music_note</i>
          </button>
        </div> <!-- END col END -->
      </div> <!-- END row END -->
    </div> <!-- END Container -->
    
    <!-- Compiled and minified JavaScript -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"> </script>
  <script>
  
    function appearNow(tMessage){
      var x = document.getElementById('cfrmBoxMsg');
      x.innerHTML = tMessage;
      var y = document.getElementById('cfrmBox');
      y.style.display = "inline";
    }
    
    function myFunction() {
      var stTime = document.getElementById('idCardContentP').innerHTML;
      if (stTime != "") {
        document.getElementById("idStopWatchBtn").classList.add("disabled");
        document.getElementById("btnNextTask").classList.add("disabled");
        appearNow('Do you want to save your time for this task?')
      } else {
        document.getElementById('idCardPanelSpan').innerHTML = "Task 2: Do something even funner!";
        M.toast({html: 'Since the timer has not started you can freely move to the next task'});
      }
    }
  
    function startStopTimer() {
      M.toast({html: 'Timer is hard coded to be greater than 0 for testing!'});
    }
    
    function confirmYesNo(btnValue){
      switch (btnValue) {
        case "yes":
          document.getElementById('idCardContentP').innerHTML = '';
          showHideElements('cfrmBox');
          M.toast({html: 'You clicked yes.'});
          //Since timer is blank it will hit code to move to next task
          myFunction();
          break;
        case "no":
          showHideElements('cfrmBox');
          M.toast({html: 'You clicked no so nothing happens'});
          break;
        default:
          M.toast({html: 'Oops this should not happen'});
      } 
      document.getElementById("idStopWatchBtn").classList.remove("disabled");
      document.getElementById("btnNextTask").classList.remove("disabled");
    }
    
    function showHideElements(showHideWhat) {
      //Be careful with this function if you start with display block versus inline
      var x = document.getElementById(showHideWhat);
      if (x.style.display !== "none") {
        x.style.display = "none";
      } else {
        x.style.display = "inline";
      }
    }
  </script>
  </body>
</html>

创建一个自定义/更漂亮的Confirm（）并在if（）语句中使用它

1 个答案: