2015-09-13 2 views
0

Я начал возиться с JS вчера, но я, как самый большой нуб ^^,JavaScript - Нажмите на кнопку, чтобы показать и скрыть поле ввода

Я пытаюсь сделать кнопку, которая может показать и скрыть поле ввода текста одним щелчком мыши.

Я использовал createElement("input"), чтобы создать окно, но может ли кто-нибудь помочь мне, как правильно использовать removeChild? = D Потому что я не могу заставить его спрятаться. Я хочу использовать только html и js для этого

Спасибо!

/gruffmeister @ Шотландию

+0

возможный дубликат [Javascript скрыть/показать элемент ] (http://stackoverflow.com/questions/6242976/javascript-hide-show-element) – Chris

ответ

0

Вот Чистый JavaScript пример для вас:

var elem = document.createElement("input"); 
var btn = document.createElement("button"); 
var txt = document.createTextNode("Hide Input"); 

elem.id = "hideme"; 

btn.appendChild(txt); 

document.body.appendChild(elem); 
document.body.appendChild(btn); 

btn.addEventListener('click', function(){ 
    var input = document.getElementById("hideme"); 
    document.body.removeChild(input); 
}); 
+0

Спасибо! Просто то, что я искал =) – gruffmeister

0

Почему бы не использовать простой JQuery подход:

<!doctype html> 
    <html lang="en"> 
    <head> 
    <meta charset="utf-8"> 
    <title>toggle demo</title> 
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script> 
    <script> 
    $(function() { 
     $('button').click(function() { 
      $('p').toggle; 
      $("#myTextField").toggle(); 
     }); 
    }); 
    </script> 
    </head> 
    <body> 
    <button>Toggle</button> 
    <input id="myTextField" type="text" name="myTextField" value=""> 
    </body> 
    </html> 
Смежные вопросы