如何使用单选按钮在 URL 中添加和删除字符？ (Javascript)答案

【问题标题】：How to add and remove characters from an URL using radio buttons? (Javascript)如何使用单选按钮在 URL 中添加和删除字符？ (Javascript)
【发布时间】：2023-04-06 08:30:01
【问题描述】：

我有三个单选按钮，假设将文本附加到 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>

【问题讨论】：

标签： javascript string url radio-button

【解决方案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;
    }

【讨论】：

谢谢！我需要链接的第一部分是动态的，而不是替换整个链接，但我可以通过使用两个 url 来做到这一点。可能不是最好的解决方案，但它确实有效。更新了 Codepen：codepen.io/jangeltun/pen/yLYJeGG

【解决方案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;
}

【讨论】：