将Javascript变量作为href传递给HTML按钮

Pass Javascript variable to HTML button as href

本文关键字：HTML 按钮 href Javascript 变量      更新时间：2023-09-26

我有一个javascript，它获取用户文件夹ID并返回该文件夹的链接。

    <script>
        function onSuccess(ID_FOLDER) {
        var div = document.getElementById('output');
        var FolderPathURL = "https://drive.google.com/drive/folders/"+ID_FOLDER+"";
        div.innerHTML = "<a href='"+FolderPathURL+"' target='_blank'>Link to Folder</a>"
        }
        google.script.run.withSuccessHandler(onSuccess).getFolderIds();
    </script>

html看起来是这样的，并且显示了一个href链接。这是目前的工作方式。

<div id="output">Folder URL</div>

但我需要链接是一个按钮（一个谷歌css蓝色的操作按钮），所以当他们点击按钮时，链接就会打开。

<button class="action">Show Folder</button> 

 <script>
    function onSuccess(ID_FOLDER) {
    var div = document.getElementById('output');
    var FolderPathURL = "https://drive.google.com/drive/folders/"+ID_FOLDER+"";
    div.innerHTML = "<a href='"+FolderPathURL+"' target='_blank'><button class="action button-blue">Show Folder</button> </a>"
    }
    google.script.run.withSuccessHandler(onSuccess).getFolderIds();
</script>

添加css作为@Ashwin建议的

.button-blue {
 background: -moz-linear-gradient(top, #4d90fe, #4787ed);
 background: -ms-linear-gradient(top, #4d90fe, #4787ed);
 background: -o-linear-gradient(top, #4d90fe, #4787ed);
 background: -webkit-linear-gradient(top, #4d90fe, #4787ed);
 background: linear-gradient(top, #4d90fe, #4787ed);
 border: 1px solid #3079ed;
 color: #fff;
 }

将此类添加到相关链接标签：

.button-blue {
  background: -moz-linear-gradient(top, #4d90fe, #4787ed);
  background: -ms-linear-gradient(top, #4d90fe, #4787ed);
  background: -o-linear-gradient(top, #4d90fe, #4787ed);
  background: -webkit-linear-gradient(top, #4d90fe, #4787ed);
  background: linear-gradient(top, #4d90fe, #4787ed);
  border: 1px solid #3079ed;
  color: #fff;
}

从HTML5开始，按钮支持formation属性。最棒的是，不需要javascript或欺骗。

更改：

  div.innerHTML = "<a href='"+FolderPathURL+"' target='_blank'><button class="action button-blue">Show Folder</button> </a>"

收件人：

  div.innerHTML = "<form><button formaction='"+FolderPathURL+"'>Show Folder</button></form>"
相关文章：