如何通过getElementById获取用户输入生成可点击URL超链接？

你之前使用的<a href="#resultx">是锚点链接，作用是跳转到页面内id为resultx的元素，并非指向生成的目标URL，所以无法实现点击跳转需求。以下两种方案可以解决问题：

方案一：直接使用<a>作为展示容器 #

将原来的<span>替换为<a>标签，在生成URL时直接修改它的href属性和显示文本：

修改后的HTML代码 #

<input type="text" class="form-control" id="first_name" name="first_name" placeholder="First Name">
<input type="text" class="form-control" id="last_name" name="last_name" placeholder="Last Name">
<br><button type="button" onClick="generateURLX();">Generate URL</button><br>
<a id="resultx" href="#" target="_blank"></a>

修改后的JS函数 #

function generateURLX() {
  var partx = document.getElementById('first_name').value;
  var party = document.getElementById('last_name').value;
  var urlx = "https://example.com/" + partx + "/" + party + ".html";
  var resultLink = document.getElementById('resultx');
  // 设置链接的目标地址
  resultLink.href = urlx;
  // 设置链接显示的文本内容
  resultLink.innerHTML = urlx;
}

方案二：在<span>中动态插入<a>标签 #

保持原有的<span>容器不变，在生成URL时拼接出完整的<a>标签HTML并插入进去：

原HTML代码不变 #

<input type="text" class="form-control" id="first_name" name="first_name" placeholder="First Name">
<input type="text" class="form-control" id="last_name" name="last_name" placeholder="Last Name">
<br><button type="button" onClick="generateURLX();">Generate URL</button><br>
<span id="resultx"></span>

修改后的JS函数 #

function generateURLX() {
  var partx = document.getElementById('first_name').value;
  var party = document.getElementById('last_name').value;
  var urlx = "https://example.com/" + partx + "/" + party + ".html";
  // 拼接包含完整链接的HTML代码
  var linkHTML = `<a href="${urlx}" target="_blank">${urlx}</a>`;
  document.getElementById('resultx').innerHTML = linkHTML;
}

补充说明 #

• 添加target="_blank"属性可以让链接在新窗口打开，避免当前页面跳转；
• 如果需要对用户输入的内容做合法性校验（比如过滤特殊字符），可以在拼接URL前增加相关处理逻辑。

内容的提问来源于stack exchange，提问作者John Nicholas Santos