Javascript 在表单重置后删除href链接

我有下面的模拟表单，我希望

链接

消失，或者重置为默认选择

HTML:

<form name="formName" target="_blank">

<div style="margin: 0 auto; width:600px;">

  <div style="float:left;"><span>Pick AAA</span><br>
    <select id="AAA" onchange="showLink()">
      <option value="11">Eleven</option>
      <option value="12">Twelve</option>
      <option value="13">Thirteen</option>
      <option value="14">Fourteen</option>
    </select>
  </div>

  <div style="float:right;"><span>Pick BBB</span><br>
    <select id="BBB" onchange="showLink()">
      <option value="1">One</option>
      <option value="2">Two</option>
      <option value="3">Three</option>
      <option value="4">Four</option>
    </select>  
  </div>

  <a href="generateLink()" id="link" target="_blank"></a><br><br>

  <div style="float:left; margin-left:120px; margin-right: 40px; margin-top:70px;">
    <input type="submit" value="Go to"><br><br>
    <input type="reset" value="Reset Selection">
  </div>

function generateLink()
{
  var A = document.getElementById('AAA').value;
  var B = document.getElementById('BBB').value;

  if(B == "1" || B == "2")
    link ='http://' + B + '.' + A + '.domain';
  else if(B == "3" || B == "4")
      link ='http://' + B + '.' + A + '.domain/link.jsp';
  else
    link ='/404.html';

  return link;
}

function showLink()
{
  var link = generateLink();

  document.getElementById("link").href = link;
  document.getElementById("link").innerHTML = link;
}

document.formName.onsubmit = function(){
    this.action = generateLink();
}

当我点击重置选择时，

select

元素被重置，但是链接本身不会因为

onchange

命令而消失。有人知道如何重置链接吗？

试试：

document.formName.onreset = function(){
    document.getElementById('link').innerHTML = ''
}

尝试：

---

您正在以编程方式创建链接，因此也需要以编程方式删除它：

document.formName.onreset = function(){
    let linkEl = document.getElementById("link");
    linkElement.href = '';
    linkElement.innerHTML= '';
}

---

您正在以编程方式创建链接，因此也需要以编程方式删除它：

document.formName.onreset = function(){
    let linkEl = document.getElementById("link");
    linkElement.href = '';
    linkElement.innerHTML= '';
}

reset（）方法仅重置数据。您需要自己隐藏链接。

reset（）方法仅重置数据。您需要自己隐藏链接。

通常，方法会恢复表单元素的默认值。此方法的作用与单击表单的重置按钮相同

为什么链接未重置为默认值？ 链接是锚定标记，它不是表单字段的一部分。表单重置功能是重置表单字段，而不是像锚、p、h1-h6这样的其他元素

看看工作代码。

函数generateLink（）{
var A=document.getElementById（'AAA'）。值；
var B=document.getElementById（'BBB'）。值；
如果（B==“1”| | B==“2”）
link='http://'+B+'.+A+'.domain'；
else if（B==“3”| | B==“4”）
link='http://'+B+'.+A+'.domain/link.jsp'；
其他的
link='/404.html'；
返回链接；
}
函数showLink（）{
var link=generateLink（）；
document.getElementById（“link”）.href=link；
document.getElementById（“link”）.innerHTML=link；
}
document.formName.onsubmit=函数（）{
this.action=generateLink（）；
}
document.formName.onreset=函数（）{
document.getElementById（'link'）。innerHTML=''
}

选择AAA

十一
十二
十三
十四
选择BBB

一个
两个
三
四

通常，方法会恢复表单元素的默认值。此方法的作用与单击表单的重置按钮相同

为什么链接未重置为默认值？ 链接是锚定标记，它不是表单字段的一部分。表单重置功能是重置表单字段，而不是像锚、p、h1-h6这样的其他元素

看看工作代码。

函数generateLink（）{
var A=document.getElementById（'AAA'）。值；
var B=document.getElementById（'BBB'）。值；
如果（B==“1”| | B==“2”）
link='http://'+B+'.+A+'.domain'；
else if（B==“3”| | B==“4”）
link='http://'+B+'.+A+'.domain/link.jsp'；
其他的
link='/404.html'；
返回链接；
}
函数showLink（）{
var link=generateLink（）；
document.getElementById（“link”）.href=link；
document.getElementById（“link”）.innerHTML=link；
}
document.formName.onsubmit=函数（）{
this.action=generateLink（）；
}
document.formName.onreset=函数（）{
document.getElementById（'link'）。innerHTML=''
}

选择AAA

十一
十二
十三
十四
选择BBB

一个
两个
三
四

谢谢。由于第一部分和最后的建议，最终选择了文卡特拉曼的答案。谢谢。由于第一部分和最后的建议，最终选择了文卡特拉曼的答案。谢谢。由于第一部分和最后的建议，最终选择了文卡特拉曼的答案。谢谢。由于第一部分和最后的建议，最终选择了文卡特拉曼的答案。感谢详尽的答案和建议。感谢详尽的答案和建议。