如何使用單選按鈕在 URL 中添加和刪除字符？ (Javascript)

Question

我有三個單選按鈕，假設 append 文本到 URL。 該部分正在工作，但我需要一次添加一個文本，因此它看起來像以下之一：

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

不像現在這樣：

image-instagram.jpgtwitter.jpgmobile.jpg

代碼筆示例

 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 與參數傳遞一起使用。 在這種情況下將需要更少的代碼。

<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

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