Изменения DOM с javascript не работают

Я пытаюсь создать простое выпадающее меню, которое будет иметь два элемента: «мужчина» и «женщина». Я использую кнопку, чтобы эти элементы стали видимыми. Проблема в том, что они становятся видимыми, но только на долю секунды и возвращаются к скрытию.Изменения DOM с javascript не работают

Вот мой код:

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

источник

2016-09-18 Tyler McAnally

Посмотрите на вас консоли браузера. Я предполагаю, что у вас есть ошибка, потому что вы не объявили myFunction.

Пожалуйста, прочтите этот URL: http://www.w3schools.com/jsref/event_onclick.asp и используйте один из описанных подходов.

источник

2016-09-18 20:09:57 ktaras

вы можете сделать это без Javascript live fiddle with 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>

источник

2016-09-18 20:56:56

Изменения DOM с javascript не работают

ответ

Смежные вопросы