Question

大家好，我可能需要一些关于javascript的帮助。我在这里很新，但我已经尝试查找其他帖子但仍无法解决此问题。

我有一个包含2个项目的页面，其中包含一个userid标记和一个javascript内容标记。

1）我想只显示userid标签并隐藏javascript内容

2）在用户标识（文本框）中收到用户的输入后，点击检索后，它将检查我的数据库，如果用户标识有效，

a）看来javascript内容会自动取消隐藏并自行显示。

b）如果无效则显示无效。

以下是我想要隐藏的代码片段：

<div id="content">
<div id="idtag">

    <form action="verification.php" method="get">
    <span> User-ID: </span>
    <input class="textbox" type="textbox" name="userid"> 
    <input type="submit" name="retrive" value="Retrive">
    </form>

</div>

<!-- This is the part that i want to hide -->
<div id="CAPTCHA">
    <!-- CAPTCHA CODES HERE --><br>
    <form>
     <img id="IMG_LEFT" src="./lion tail.gif" />
     <img id="IMG_RIGHT" src="./lion head.gif" />
     <p>Move the Bar to Move the Images Closer</p>
     <input type="range" min="0" max="200" value="0" steps="2"    
      oninput="moveRight(value);"/>
     <br />Slider Value = <span id="sliderStaus">0</span>
     <br />Random Distance = <span id="randDist">0</span>
     <br />Correct Spot = <span id="spotBoolean">false</span>
  </form>

</div>

 <div id="invalid">
    <h2> User Invalid </h2>
</div>
</div>

提前致谢。非常感谢帮助.. :)

Answer 1

使用纯JavaScript，你可以这样做：

/*Set the Captcha hidden initially &*/
document.getElementById('CAPTCHA').style.visibility = 'hidden'; 

/*Adding listener to input for showing/hiding captcha*/
document.addEventListener('keyup', function(){
    if(document.getElementById('userid').value.length >= 1){
       document.getElementById('CAPTCHA').style.visibility = 'visible';
    }else{
       document.getElementById('CAPTCHA').style.visibility = 'hidden';
    }
  });

要使这段代码起作用，您只需要将id“userid”添加到HTML输入中。所以HTML将是：

<div id="content">
<div id="idtag">
    <span> User-ID: </span>
    <input class="textbox" type="textbox" id="userid" name="userid"> 
</div>

<!-- This is the part that i want to hide -->
<div id="CAPTCHA">
    <!-- CAPTCHA CODES HERE --><br>
    <form>
     <img id="IMG_LEFT" src="./lion tail.gif" />
     <img id="IMG_RIGHT" src="./lion head.gif" />
     <p>Move the Bar to Move the Images Closer</p>
     <input type="range" min="0" max="200" value="0" steps="2"    
      oninput="moveRight(value);"/>
     <br />Slider Value = <span id="sliderStaus">0</span>
     <br />Random Distance = <span id="randDist">0</span>
     <br />Correct Spot = <span id="spotBoolean">false</span>
  </form>

</div>
</div>

请参阅：JSFiddle

Answer 2

或者如果你想要一个纯粹的javascript解决方案，就像这样：

<强> HTML

与你相同

<强> CSS

#CAPTCHA {display: none;}

<强> JS

var textbox = document.querySelector('.textbox');
textbox.addEventListener('keyup', function() {
    if(this.value.length > 0) {
        document.querySelector('#CAPTCHA').style.display = 'block';
    } else {
        document.querySelector('#CAPTCHA').style.display = 'none';
    }
});

＆＃13;

var textbox = document.querySelector('.textbox');
textbox.addEventListener('keyup', function() {
  if (this.value.length > 0) {
    document.querySelector('#CAPTCHA').style.display = 'block';
  } else {
    document.querySelector('#CAPTCHA').style.display = 'none';
  }
});

＆＃13;

#CAPTCHA {
  display: none;
}

＆＃13;

<div id="content">
  <div id="idtag">
    <span> User-ID: </span>
    <input class="textbox" type="textbox" name="userid">
  </div>

  <!-- This is the part that i want to hide -->
  <div id="CAPTCHA">
    <!-- CAPTCHA CODES HERE -->
    <br>
    <form>
      <img id="IMG_LEFT" src="./lion tail.gif" />
      <img id="IMG_RIGHT" src="./lion head.gif" />
      <p>Move the Bar to Move the Images Closer</p>
      <input type="range" min="0" max="200" value="0" steps="2" oninput="moveRight(value);" />
      <br />Slider Value = <span id="sliderStaus">0</span>
      <br />Random Distance = <span id="randDist">0</span>
      <br />Correct Spot = <span id="spotBoolean">false</span>
    </form>

  </div>
</div>

＆＃13;

如何通过数据库检查文本框的内容时隐藏/取消隐藏div标签

2 个答案: