用javascript进行的DOM更改无法正常工作

Question

我正在尝试制作一个简单的下拉菜单，其中包含两个元素：“男性”和“女性”。 我正在使用一个按钮使这些元素变为可见。 问题在于它们变得可见，但仅需一秒钟的时间，然后又回到隐藏状态。

这是我的代码：

<html> 
<head>

<title>
  Validation Form
</title>
</head>

<body>
<h1>
  Validation Form
</h1>
<form id="contactForm" action="" >
   <fieldset>
    <legend>Validation</legend>
    <p>
  <label for="firstname">First Name</label> 
  <input id="firstname" name="firstname" type="text"/>

</p>
<p>
  <label for="lastname">Last Name</label> 
  <input id="lastname" name="lastname" type="text" />

</p>
<p>
  <label for="gender">Gender</label> 
  <input id="gender" name="gender" type="text" />

</p>
<div class="dropdown">
    <button id="btn_drop" onclick="myFunction()" class="dropbtn">Dropdown</button>
    <div id="myDropdown" style="display: none">
        <p id="drop_male">Male</p>
        <p id="drop_female">Female</p>
    </div>
</div>
<p>
  <label for="website">Website</label> 
  <input id="website" name="website" type="text" />

</p> 
<p>
  <input type="button" id="submit" name="submit" value="Submit" /> 
  <input type="reset" value="clear" />
</p>
</fieldset>
</form>

<script> 
  var dropBtn = document.getElementById("btn_drop");
  dropBtn.onclick = function () {
     // show all elements on clicking submit!
     var drop = document.getElementById("myDropdown");
     drop.style.display = 'block';

  }

</script>
</body>
</html>

Answer 1

看看您的浏览器控制台。 我认为您有一个错误，因为您没有声明myFunction 。

请阅读以下URL： http : //www.w3schools.com/jsref/event_onclick.asp，并使用上述方法之一。

Answer 2

您可以在没有javascript的情况下使用CSS进行提琴演奏

 <p>
    <label for="gender">Gender</label> 
     <select  id="gender" name="gender" type='select' >
       <option value="">Select Gender</option>
       <option value="male">Male</option>
       <option value="female">Female</option>
      </select>
     </p>

用javascript进行的DOM更改无法正常工作

问题描述

2 个解决方案

解决方案1
0 2016-09-18 20:09:57

解决方案2
0 2016-09-18 20:56:56

用javascript进行的DOM更改无法正常工作

问题描述

2 个解决方案

解决方案1 0 2016-09-18 20:09:57

解决方案2 0 2016-09-18 20:56:56

解决方案1
0 2016-09-18 20:09:57

解决方案2
0 2016-09-18 20:56:56