javascript - HTML Javascript - 如何向输入语句添加函数并隐藏输入语句，除非选中"is"，然后取消隐藏

Question

我正在尝试学习和理解 javascript。我是 JavaScript 新手。

我能够弄清楚如何根据选中的内容隐藏和取消隐藏单选按钮。

我想对输入标签做同样的事情 - 我没有成功。

用户单击"is"后 - 输入标记会显示“从今天起 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.
    }

预先感谢您的帮助。

艾琳娜

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

Answer 1

您可以修改 <input> 的值像这样的字段:

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

但是如果您希望文本位于 <input> 之上字段，然后添加新的 <div>上面然后修改<div>的内容。为此，我添加了以下内容 <div>上面<input> :

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

然后修改.innerHTML <div>的属性(property)像这样:

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

要通过单击单选按钮来执行此操作，只需调用 date30Days() if内USDeviceFailure30Days()的声明但随后您还需要将该值重置为 ''在 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 = '';
     }
   }

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

 <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>

<小时/>