单击锚标记时如何显示和隐藏输入？

【问题标题】：How do I show and hide input when anchor tag is clicked?单击锚标记时如何显示和隐藏输入？
【发布时间】：2020-04-07 15:41:57
【问题描述】：

如何在单击Edit 时隐藏label 并显示input，并在单击Cancel 时显示label 并隐藏input？

<label class="lblProfile">First Name: </label>
<label class="ansProfile">${resident.firstname}</label>
<input id="firstname"name="firstname" type="text" placeholder="${resident.firstname}"/>
<a> Edit </a>
<a> Cancel </a>

谁能告诉我如何编码？

【问题讨论】：

当涉及到切换而不是导航时，首先尝试使用<button> 标签而不是锚<a>。在<button> 上单击时使用click 事件，隐藏标签，显示输入和取消<button> 相同。还有一种纯粹的 CSS 方法，使用<input type="checkbox">。

标签： javascript html jsp servlets

【解决方案1】：

类似下面的东西应该可以解决问题。

function showhide(which){

 var edit = document.getElementById('edit');
 var cancel = document.getElementById('cancel'); 
 var input = document.getElementById('firstname');
 var label = document.getElementsByClassName('ansProfile')[0];
 
 if(which==='edit'){
    if(edit.checked){
       cancel.checked=false;
       label.style.display='none';
       input.style.display='inline'; 
    }else{
       label.style.display='inline';  
    }
  }else{
     if(cancel.checked){
       edit.checked=false;
       label.style.display='inline';
       input.style.display='none'; 
    }else{
       input.style.display='inline';  
    }  
  }
}

<label class="lblProfile">First Name: </label>
<label class="ansProfile">${resident.firstname}</label>
<input id="firstname"name="firstname" type="text" placeholder="${resident.firstname}"/>
<input id='edit' type='checkbox'   onClick='showhide("edit")'/> Edit 
<input id='cancel' type='checkbox' onClick='showhide("cancel")'/> Cancel

【讨论】：