当我尝试使用 Javascript API 连接到 Dropbox 时，按钮无法呈现

Buttons not rendering when I try to connect to Dropbox using the Javascript API

本文关键字：Dropbox 按钮 连接 API Javascript      更新时间：2023-09-26

我想使用 Javascript 连接到 Dropbox。 这是我正在做的实验室的一部分。

我有下面的代码，我已经检查了语法错误，但没有找到任何错误。 但是，它不显示我预期的按钮。

下面是一个 JSFiddle 演示了现在的代码：https://jsfiddle.net/gv19a3mw/15/

这里有一个小提琴，显示了我预期的布局（没有执行Javascript）： https://jsfiddle.net/gv19a3mw/12/

谁能告诉我为什么当我的 Javascript 正在执行时按钮不显示？

<html>
<head>
  <script src="js/jquery-1.11.1.min.js"></script>
  <script src="https://www.dropbox.com/static/api/dropbox-datastores-1.2-latest.js">
  </script>
  <script type="text/javascript">
    $(document).ready(function() {
      $('#w_area').hide();
      $('#r_area').hide();
      // Create a dropbox client
      var client = new Dropbox.client({key: "pbio1kig5q73lli"});
      // Authenticate the client
      client.authenticate({interactive: false}, function(error, client) {
        if (error) {
          alert("Authentication error: " + error);
          }
        });
      // Show w_area if login ok
//      alert(client.isAuthenticated());
      if (client.isAuthenticated()) {
        $('#w_area').show();
      };

      // Write to myfile.txt in Dropbox
      $('#w_button').click(function() {
        client.authenticate({interactive: true}, function(error, client) {
          if (error) {
            alert("Authentication error: " + error);
          }
          else {
            client.writeFile("myfile.txt", $('textarea#w_content').val(), function(error) {
              if (error) {
            alert("Write error: " + error);
            }
            else {
              alert("File written successfully!");
              $('#r_area').show();
            }
          });
          }
        });
      });
      // Read from myfile.txt from Dropbox
      $('#r_button').click(function() {
        client.authenticate({interactive: true}, function(error, client) {
          if (error) {
            alert("Authentication error: " + error);
          }
          else {
            client.readFile("myfile.txt", {}, function(error, data) {
              if (error) {
                alert("Read error: " + error);
              }
              else {
                alert("File read successfully!");
                $('textarea#r_content').val(data);
              }
            });
          }
        });
      });
    })
  </script>
  </script>
</head>
<body>
  <h3>File Read/Write in Dropbox</h3>
  <div id="w_area">
    <textarea id="w_content" cols="50" rows="5">
    </textarea>
    <button id="w_button">
      Write to File in Dropbox
    </button>
    <br /><br />
  </div>
  <div id="r_area">
    <textarea id="r_content" cols="50" rows="5">
    </textarea>
    <button id="r_button">
      Read from File in Dropbox
    </button>
    <br /><br />
  </div>
</body>
</html>

从元素 div#w_area 和 div#r_area 中删除按钮 

 $(document).ready(function() {
 $('#w_area').hide();
 $('#r_area').hide();

由于此代码，您的按钮也不可见。

相关文章：