Как добавить и удалить символы из URL с помощью переключателей? (Javascript)

Question

У меня есть три переключателя, которые должны добавлять текст в URL. Эта часть работает, но мне нужно, чтобы добавляемый текст был по одному, поэтому он будет выглядеть следующим образом:

image-instagram.jpg
image-twitter.jpg
image-mobile.jpg

Не так, как сейчас:

image-instagram.jpgtwitter.jpgmobile.jpg

Пример Codepen

function addInstagramLink(){
    var link = document.getElementById('url');
    link.href += "-instagram.jpg";
    document.getElementById("demo").innerHTML = link;
}

function addTwitterLink(){
    var link = document.getElementById('url');
    link.href += "-twitter.jpg";
    document.getElementById("demo").innerHTML = link;
}

function addMobileLink(){
    var link = document.getElementById('url');
    link.href += "-mobile.jpg";
    document.getElementById("demo").innerHTML = link;
}

<div>
    <a id="url" href="image" target="_blank">image link</a>
</div>
<div>
    Instagram <input type="radio" onclick="javascript:addInstagramLink();" name="graphicSize" id="instaSize" value="Instagram" checked>
    Twitter <input type="radio" onclick="javascript:addTwitterLink();" name="graphicSize" id="twitterSize" value="Twitter">
    Mobile <input type="radio" onclick="javascript:addMobileLink();" name="graphicSize" id="mobileSize" value="Mobile">
</div>

<p id="demo"></p>

Answer 1

Вы можете использовать одну функцию с передачей параметров. В этом случае потребуется меньше кода.

<div>
    <a id="url" href="image" target="_blank">image link</a>
</div>
<div>
    Instagram <input type="radio" onclick="javascript:addLink('image-instagram.jpg');" name="graphicSize" id="instaSize" value="Instagram" checked> Twitter <input type="radio" onclick="javascript:addLink('image-twitter.jpg');" name="graphicSize" id="twitterSize"
        value="Twitter"> Mobile
    <input type="radio" onclick="javascript:addLink('image-mobile.jpg');" name="graphicSize" id="mobileSize" value="Mobile">
</div>

<p id="demo"></p>

Функция

function addLink(linkValue) {
        var link = document.getElementById('url');
        link.href = linkValue;
        document.getElementById("demo").innerHTML = link.href;
    }

Answer 2

А как насчет следующего кода:

function addInstagramLink(){
  var link = document.getElementById('url');
  link.href = 'image-instagram.jpg';
  document.getElementById("demo").innerHTML = link.href;
}

function addTwitterLink(){
  var link = document.getElementById('url');
  link.href = 'image-twitter.jpg';
  document.getElementById("demo").innerHTML =  link.href;
}

function addMobileLink(){
  var link = document.getElementById('url');
  link.href= 'image-mobile.jpg';
  document.getElementById("demo").innerHTML = link.href;
}