如何使用单选按钮从URL添加和删除字符？ （Javascript）

Question

我有三个单选按钮，它们假定将文本附加到URL。该部分正在工作，但是我需要一次附加一个文本，因此看起来像其中之一：

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

当前不喜欢它：

image-instagram.jpgtwitter.jpgmobile.jpg

Codepen example

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

下一个代码如何：

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

Answer 2

您可以将单个函数与参数传递一起使用。在这种情况下，所需的代码更少。

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