为什么我的按钮功能只提供一次输出？答案

【问题标题】：Why is my button function only providing output once?为什么我的按钮功能只提供一次输出？
【发布时间】：2020-11-08 01:26:00
【问题描述】：

我正在试验一个基本的 VSCode 扩展 webview。我正在尝试单击一个简单的按钮以在单击时显示一条消息，但该消息仅在第一次出现。我的 HTML 代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Module Manager</title>
  <style> h1 {
    position: fixed;
    top: 50%;
    left: 50%;
    margin-top: -100px;
    margin-left: -200px;}
  </style>
</head>
<body style="background-color:rgb(60,99,201);">
  <h1 style="color:white;">Welcome to the Lab Ticketing System</h1>
  
  <button onclick="moduleAdd()">Click me</button>
  
  <script>
    function moduleAdd(){
      const vscode = acquireVsCodeApi(); 
      vscode.postMessage({command: "alert", text: "BUTTON PRESSED!"});
    }
  </script> 
</body>
</html>

然后，javascript代码：

let newCommand = vscode.commands.registerCommand('ticketing.start', function () {
    vscode.window.showInformationMessage("Activating ticketing system!")
    
    // create webview
    const modulePanel = vscode.window.createWebviewPanel('modManage', "Module Manager",
    vscode.ViewColumn.One, {enableScripts: true}, );
    
    // pull in the HTML content for the webview panel from external module
    modulePanel.webview.html = htmlStuff.getWelcomeScreen();
    
    // handle recieving messages from the webview
    modulePanel.webview.onDidReceiveMessage(message => 
        {switch(message.command){case 'alert': vscode.window.showErrorMessage(message.text);
        return;}}, undefined, context.subscriptions); 
    });
    context.subscriptions.push(disposable, newCommand);

我省略了一些管理扩展的代码，因为 webview 显示正确，我认为这只是我如何实现按钮的问题。

【问题讨论】：

仅acquireVsCodeApi() 一次，在需要它的功能之外
当你使用style标签时，为什么在html标签中硬编码样式
@rioV8 谢谢！正如您所说，就像将 acquireVsCodeApi() 移到函数之外一样简单。你是对的，没有理由，它很乱，我会清理它。我对此很陌生！

标签： javascript html node.js visual-studio-code vscode-extensions

【解决方案1】：

只调用一次acquireVsCodeApi()，在需要它的函数之外。

【讨论】：