I want to make a link where the href is dependent on a js variable

Question

I figured out the whole innerhtml thing but I don't know how to add variables into the href. I want it to make a link with the title being the title you enter and with the javascript that you enter to be in the href when you click "create".

 <div class="title"> Bookmarklet Maker <br> <br> <input size="13" onkeypress="return searchKeyPress(event);" name="getTitle" type="text" id="getTitle" style="background-color: #252525; border: 2px; border-style: double; border-color: white; color: white; padding: 15px 32px; text-align: left; text-decoration: none; display: inline-block; font-size: 16px; font-weight: bold; margin: 4px 2px; cursor:;" placeholder="Bookmarklet name" /> <br> <input size="40" onkeypress="return searchKeyPress(event);" name="geJs" type="text" id="getJs" style="background-color: #252525; border: 2px; border-style: double; border-color: white; color: white; padding: 15px 32px; text-align: left; text-decoration: none; display: inline-block; font-size: 16px; font-weight: bold; margin: 4px 2px; cursor:;" placeholder="Javascript" /> <br> <button style="background-color: #252525; border: 2px; border-style: solid; border-color: white; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; font-weight: bold; margin: 4px 2px; cursor: pointer;" id="bookmarkletbutton" onclick="createBookmarklet()">Create</button> <script> function createBookmarklet() { var title_input = document.getElementById('getTitle').value; var js_input = document.getElementById('getJs').value; document.getElementById('title').innerHTML = title_input; document.getElementById('js').innerHTML = js_input; } </script> <br> <br> <a class="link" href="" id="title"></a> </div>

Answer 1

You can set the href atrubite via <element>.setAttribute("href", <value>)
-> document.getElementById("title").setAttribute("href", js_input)
(As mentioned by David: <element>.title = <value> also works)

Answer 2

 <div class="title"> Bookmarklet Maker <br> <br> <input size="13" name="getTitle" type="text" id="getTitle" style="background-color: #252525; border: 2px; border-style: double; border-color: white; color: white; padding: 15px 32px; text-align: left; text-decoration: none; display: inline-block; font-size: 16px; font-weight: bold; margin: 4px 2px; cursor:;" placeholder="Bookmarklet name" /> <br> <input size="40" name="geJs" type="text" id="getJs" style="background-color: #252525; border: 2px; border-style: double; border-color: white; color: white; padding: 15px 32px; text-align: left; text-decoration: none; display: inline-block; font-size: 16px; font-weight: bold; margin: 4px 2px; cursor:;" placeholder="Javascript" /> <br> <button style="background-color: #252525; border: 2px; border-style: solid; border-color: white; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; font-weight: bold; margin: 4px 2px; cursor: pointer;" id="bookmarkletbutton" onclick="createBookmarklet()">Create</button> <script> function createBookmarklet() { var title_input = document.getElementById('getTitle').value; var js_input = document.getElementById('getJs').value; document.getElementById('title').innerHTML = title_input; document.getElementById('title').href = js_input; } </script> <br> <br> <a class="link" href="" id="title"></a> </div>

You were using the wrong id in getElementById in the last line. Also, use .href for changing href value. Hope this helps!