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

Question

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

我有下面的代码，我已经检查过它是否存在语法错误，但没有发现任何错误。但是，它没有显示我期望的按钮。

这里有一个 JSFiddle 演示了现在的代码：https://jsfiddle.net/gv19a3mw/15/

这是一个 Fiddle 显示我预期的布局（没有 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>

Answer 1

从元素 div#w_area 和 div#r_area

中删除按钮

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

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

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

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

html

javascript

dropbox