This is my first time posting on this forum, but I have lurked around for fun for years now. Anyway, I’m making a very simple tool, and needed some help. I’ve been on hiatus from coding for a very long time, so please forgive my formatting and likely horrible excess code. The issue I’m experiencing is when I put in the text in #1, then select a site on #2 which joins the two fields together, and finally select the copy and reset on #3 it works fine. The issue is, it adds a break before and a break after the generated URL. I’ve tried countless different ways to prevent them in order to just copy the joined URL only, but my skills just aren’t up to snuff. I’m sure it’s a simple fix for most if not all on this site, so thanks in advance!
Additionally, if anyone has any ideas how to cut down on anything else to make it more efficient and simple I’m open ears.
Thanks!
<!DOCTYPE html>
<html>
<head>
<style>
input[type=text]
{
width: 100%;
font-size: 15px;
padding: 10px;
margin: 0px;
box-sizing: border-box;
background-color: #D5DBDB;
border: 2px solid #232F3E;
border-radius: 5px;
}
.button
{
border-radius: 5px;
background-color: #D5DBDB;
border: 2px solid #232F3E;
color: black;
text-aline: center;
font-size: 15px;
padding: 10px;
width: 150px;
transition: all 0.3s;
cursor: pointer;
margin: 5px;
}
.button:hover
{
background-color: #232F3E;
border: 2px solid #FF9900;
color: white;
}
.button:focus
{
background-color: #FF9900;
color: black;
}
p
{
border-left: 10px solid red;
background-color: #D5DBDB;
border-radius: 5px;
text-indent: 5px;
font-size: 12.5px;
width: 100%;
}
div
{
text-align: right;
}
</style>
</head>
<body>
<font size="3"><b>1:</b> Input field for XXXXXXX:</font><br><br>
<input type="text" id="testurlinput" placeholder="never provide XXXXXXX to XXXXXXX">
<br><br><hr><br>
<font size="3"><b>2:</b> Select the site:</font><br><br>
<button class="button" onclick="myFunction('http://www.google.com/')">Google</button>
<button class="button" onclick="myFunction('http://x.com/')">X (<i>Twitter</i>)</button>
<button class="button" onclick="myFunction('http://www.facebook.com/')">Facebook</button>
<button class="button" onclick="myFunction('http://www.instagram.com/')">Instagram</button>
<button class="button" onclick="myFunction('https://bsky.app/')">Bluesky</button><br>
<hr><br>
<font size="3"><b>3:</b> Provide XXXXXXX with the following XXXXXXX:</font>
<p id="testlink"></p>
<button class="button" onclick="copyToClipboard('testlink')">Copy Link &<br>Reset Page</button>
<br><br><hr><br>
<hr>
<script>
function myFunction(a)
{
var z = document.getElementById("testurlinput").value;
document.getElementById("testlink").innerHTML = a + z;
}
</script>
<script>
function copyToClipboard(id)
{
var from = document.getElementById(id);
var range = document.createRange();
window.getSelection().removeAllRanges();
range.selectNode(from);
window.getSelection().addRange(range);
document.execCommand('copy');
window.getSelection().removeAllRanges();
window.location.reload();
}
</script>
</body>
</html>
The goal is simply to address both the breaks in the beginning and after in order to come out with a clean URL. As for what I’ve tried, I’ve already tried multiple different function formats to no avail.
Prior to submitting, I even reviewed more under the “Review questions already on Stack Overflow to see if your question is a duplicate.” section. Still nothing.