HTMLJavascript-如何向输入语句添加函数并隐藏输入语句，除非选中“是”，然后取消隐藏

HTML Javascript - How to add function to an input statement and hide the input statement unless Yes is checked, then unhide

本文关键字：语句 输入 隐藏 取消 然后 添加 函数 HTMLJavascript-      更新时间：2023-11-06

我正在努力学习和理解javascript。我是javascript的新手。

我能够根据检查的内容找出如何隐藏和取消隐藏单选按钮。

我想对输入标签做同样的操作——我没有成功。

一旦用户点击Yes（是），输入标签就会出现，并通过调用另一个函数显示"从今天起的30天是通过将当前日期添加30天来计算日期"。

多亏了这个网站的一位资深成员，我能够创建一个功能，为今天的日期增加30天。

不幸的是，我没能把它放在一起。

HTML:

   <div id="divDeathOccurred" class="fieldRow">
   <div class="leftLabel labelWidth22">
     <label for="">A. Has a death occurred?</label>
   </div>
   <div class="leftField">
   <div class="formField34">
     <input id="rbDeathOccurred" name="rbDeathOccurred" type="radio" 
      class="radiobuttonfield" alt="Death Occurred" title="Death Occurred" 
      value="Yes" onclick="javascript:USAYesNoCheckDO();" />Yes
     <input id="rbDeathOccurred" name="rbDeathOccurred" type="radio" 
      class="radiobuttonfield" alt="Death Occurred" title="Death Occurred" 
      value="No" onclick="javascript:USAYesNoCheckDO();" />No
    </div>
     </div>
    <p>&nbsp;</p>
    <div id="USADOYesNo" style="display:none">
    <ol type="a">
      <li>Is there a reasonable possibility that a device failure or 
         malfunction was a direct or indirect factor in the death? 
     <br>
      <input id="rbDOYesNo" name="rbDOYesNo" type="radio"  
       class="radiobuttonfield" alt="Yes - Reportable" title="Yes - 
       Reportable" value="Yes" 
        onclick="javascript:USDeviceFailure30Days();"/>Yes - Reportable    
       <input id="rbDOYesNo" name="rbDOYesNo" type="radio"
        class="radiobuttonfield" alt="No - Follow tree below" title="No -  
        Follow tree below" value="No" 
        onclick="javascript:USDeviceFailure30Days();"/>No
      <br>
     <input id="date30Days" type="text" onclick="javascript:date30Days();"/>
     </li>
    </ol>
    </div>
    </div>

第一个函数yesnoCheck.js:

function USAYesNoCheckDO() {
  if (document.getElementById('rbDeathOccurred').checked) {        
     document.getElementById('USADOYesNo').style.display = 'block';        
     } else  document.getElementById('USADOYesNo').style.display = 'none';  
    }
 function USDeviceFailure30Days() {
   if (document.getElementById('rbDOYesNo').checked) {        
    document.getElementById('date30Days').style.display = 'block';        
   } else  document.getElementById('date30Days').style.display = 'none';
   }

第二个函数date30.js:

 function date30Days(){
   var dt = new Date();
   dt.setDate( dt.getDate() + 30 );
   var mo = dt.getMonth() + 1; // JS months are 0 to 11, so need to add 1
   var dy = dt.getDate();
   var yr = dt.getYear() % 100; // just to make sure only 2 digit year
   var dueDate = (mo < 10 ? "0" : "" ) + mo + "/" + ( dy < 10 ? "0" : "" ) + 
    dy + "/" + (yr < 10 ? "0" : "" ) + yr;
    var text = "30 days from today is "
    text + dueDate; <--- this is where I want to print underneath the 
    Yes/no, once the user click on Yes - 30 days from today is mm/dd/yyyy.
    }

提前感谢您的帮助。

IreneS

顺便说一句，很抱歉，我在一家制药公司工作。

您可以修改<input>字段的值，如下所示：

document.getElementById('date30Days').value = text + dueDate; ;

但是，如果希望文本位于<input>字段上方，则在其上方添加一个新的<div>，然后修改该<div>的内容。为此，我在<input>之上添加了以下<div>：

<div id="reminder"></div>

然后修改<div>的.innerHTML属性，如下所示：

document.getElementById('reminder').innerHTML = text + dueDate;

单击单选按钮即可调用USDeviceFailure30Days()的if语句中的date30Days()，但也需要在else中将值重置为''，如下所示：

 function USDeviceFailure30Days() {
   if (document.getElementById('rbDOYesNo').checked) {        
    document.getElementById('date30Days').style.display = 'block';        
     date30Days();
   } else {
     document.getElementById('date30Days').style.display = 'none';
     document.getElementById('reminder').innerHTML = '';
     }
   }

然后从<input> 中删除来自onclick="javascript:date30Days();"的

 <input id="date30Days" type="text" />

这是您代码的修改版本：

function USAYesNoCheckDO() {
  if (document.getElementById('rbDeathOccurred').checked) {        
     document.getElementById('USADOYesNo').style.display = 'block';        
     } else  document.getElementById('USADOYesNo').style.display = 'none';  
    }
 function USDeviceFailure30Days() {
   if (document.getElementById('rbDOYesNo').checked) {        
    document.getElementById('date30Days').style.display = 'block';        
     date30Days();
   } else {
     document.getElementById('date30Days').style.display = 'none';
     document.getElementById('reminder').innerHTML = '';
     }
   }
 function date30Days(){
   var dt = new Date();
   dt.setDate( dt.getDate() + 30 );
   var mo = dt.getMonth() + 1; // JS months are 0 to 11, so need to add 1
   var dy = dt.getDate();
   var yr = dt.getYear() % 100; // just to make sure only 2 digit year
   var dueDate = (mo < 10 ? "0" : "" ) + mo + "/" + ( dy < 10 ? "0" : "" ) + 
    dy + "/" + (yr < 10 ? "0" : "" ) + yr;
    var text = "30 days from today is "
    document.getElementById('reminder').innerHTML = text + dueDate; ;        
    }
<div id="divDeathOccurred" class="fieldRow">
   <div class="leftLabel labelWidth22">
     <label for="">A. Has a death occurred?</label>
   </div>
   <div class="leftField">
   <div class="formField34">
     <input id="rbDeathOccurred" name="rbDeathOccurred" type="radio" 
      class="radiobuttonfield" alt="Death Occurred" title="Death Occurred" 
      value="Yes" onclick="javascript:USAYesNoCheckDO();" />Yes
     <input id="rbDeathOccurred" name="rbDeathOccurred" type="radio" 
      class="radiobuttonfield" alt="Death Occurred" title="Death Occurred" 
      value="No" onclick="javascript:USAYesNoCheckDO();" />No
    </div>
     </div>
    <p>&nbsp;</p>
    <div id="USADOYesNo" style="display:none">
    <ol type="a">
      <li>Is there a reasonable possibility that a device failure or 
         malfunction was a direct or indirect factor in the death? 
     <br>
      <input id="rbDOYesNo" name="rbDOYesNo" type="radio"  
       class="radiobuttonfield" alt="Yes - Reportable" title="Yes - 
       Reportable" value="Yes" 
        onclick="javascript:USDeviceFailure30Days();"/>Yes - Reportable    
       <input id="rbDOYesNo" name="rbDOYesNo" type="radio"
        class="radiobuttonfield" alt="No - Follow tree below" title="No -  
        Follow tree below" value="No" 
        onclick="javascript:USDeviceFailure30Days();"/>No
      <br><div id="reminder"></div>
     <input id="date30Days" type="text" />
     </li>
    </ol>
    </div>
    </div>

相关文章：