Pass Javascript variable to HTML button as href

Question

I have this javascript that fetches a users folderID and gives back a link to that folder.

    <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>

The html looks like this, and a href link is presented. This works as is right now.

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

But i need the link to be a button (a google css blue action button), so when they click the button the link opens.

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

Links are links. Buttons are buttons. If you want a link to look a particular way, apply CSS. — Quentin
– Quentin, Commented Mar 26, 2016 at 16:55
That's what i though. I need to read the css documentation for ssl.gstatic.com/docs/script/css/add-ons1.css i guess — John Smith
– John Smith, Commented Mar 26, 2016 at 16:56
div.innerHTML = '<button class="action" onmouseup='window.open("' + FolderPathURL + '" >Open your Folder</button> — Alan Wells
– Alan Wells, Commented Mar 26, 2016 at 21:01

Hiren patel · Accepted Answer · 2016-03-26 17:04:56Z

1

 <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>

add css as @Ashwin has suggested

.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;
 }

answered Mar 26, 2016 at 17:04

Hiren patel

9819 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

John Smith Over a year ago

I'm trying the suggested edits, but the button isn't showing. There is already a button that i can use from the css "action" which is blue. However don't i need to use "onclick"?

John Smith Over a year ago

It's just not working passing a button to the innerHTML div. Isn't there any other way of doing this, this dosen't feel like the right way to do it.

Hiren patel Over a year ago

You can call function on onclick event of existing button , and in that function you can use window.location=........ to redirect to same link @John Smith

Hiren patel Over a year ago

Let me know , if window.location works for you or not

Paul Fitzgerald · Accepted Answer · 2016-03-26 17:07:46Z

1

Add this class to the relevant link tags:

.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;
}

edited Mar 26, 2016 at 17:07

Paul Fitzgerald

12.1k4 gold badges45 silver badges57 bronze badges

answered Mar 26, 2016 at 17:00

Ashwin

3211 silver badge9 bronze badges

Comments

John Smith · Accepted Answer · 2016-03-26 18:13:29Z

0

As of HTML5, buttons support the formaction attribute. Best of all no javascript or trickery needed.

Change:

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

To:

  div.innerHTML = "<form><button formaction='"+FolderPathURL+"'>Show Folder</button></form>"

answered Mar 26, 2016 at 18:13

John Smith

3972 gold badges9 silver badges25 bronze badges

Collectives™ on Stack Overflow

Pass Javascript variable to HTML button as href

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related