Манипуляции с элементами (событие onclick)
Приветствую вас, друзья! Не могу понять как сделать так, чтобы появлялся лишь один элемент по нажатию на ссылку (с событием onclick),а по второму нажатию убирался.:(
Как это можно сделать? Вот мой код:
<div id="inf" style="width:250px; height:100px; border:1px solid #000; margin:100px;" ></div>
<div class="m">
<a href="javascript://" onclick="PostRU();" >
<img src="http://javascript.ru/cat/list/dom.gif" width="121" height="62" alt=''/>
</a>
</div>
<div class="m">
<a href="javascript://" onclick="PostTa();">
<img src="http://javascript.ru/cat/list/event.gif" width="121" height="62" alt=''/>
</a>
</div>
<script>
function PostRU() {
var element = document.createElement('div');
if (element.innerHTML=='') element.innerHTML = '<div class="information"><div class="outer-block"><label for="telephone">Телефон:</label><input type="tel" id="telephone" placeholder="79102020202" class="input1"/></div></div>';
else element.innerHTML =='';
document.getElementById("inf").appendChild(element);
};
function PostTa() {
var element = document.createElement('div');
if (element.innerHTML=='') element.innerHTML = '<div class="information"><div class="outer-block"><label for="name">Имя:</label><input type="text" id="name" placeholder="(ФИО) Иванов Иван Иванович" class="input1"/></div><div class="outer-block"><label for="telephone">Телефон:</label><input type="tel" id="telephone" placeholder="79102020202" class="input1"/></div></div>';
else element.innerHTML =='';
document.getElementById("inf").appendChild(element);
}
</script>
|
Пожалуйста, отформатируйте свой код!
Для этого его можно заключить в специальные теги: js/css/html и т.п., например: [js] ... ваш код... [/js] О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting. |
<div id="inf" style="width:250px; height:100px; border:1px solid #000; margin:100px;" ></div>
<div class="m">
<a href="javascript://" onclick="PostRU();" >
<img src="http://javascript.ru/cat/list/dom.gif" width="121" height="62" alt=''/>
</a>
</div>
<div class="m">
<a href="javascript://" onclick="PostTa();">
<img src="http://javascript.ru/cat/list/event.gif" width="121" height="62" alt=''/>
</a>
</div>
<script>
function PostRU() {
var element = document.createElement('div');
if (element.innerHTML=='') element.innerHTML = '<div class="information"><div class="outer-block"><label for="telephone">Телефон:</label><input type="tel" id="telephone" placeholder="79102020202" class="input1"/></div></div>';
else element.innerHTML =='';
document.getElementById("inf").appendChild(element);
};
function PostTa() {
var element = document.createElement('div');
if (element.innerHTML=='') element.innerHTML = '<div class="information"><div class="outer-block"><label for="name">Имя:</label><input type="text" id="name" placeholder="(ФИО) Иванов Иван Иванович" class="input1"/></div><div class="outer-block"><label for="telephone">Телефон:</label><input type="tel" id="telephone" placeholder="79102020202" class="input1"/></div></div>';
else element.innerHTML =='';
document.getElementById("inf").appendChild(element);
}
</script>
|
Nexus, cпасибо за замечание! Недавно здесь - пока не научился всё делать правильно
|
<button>Click</button>
<output></output>
<script>
var i = 0;
document.querySelector('button').onclick = function(){
document.querySelector('output').value = ++i%2? 'Какое-то значение':'';
};
</script>
Способов тьма |
"Какое-то значение" выводится текстом, а html можно вывести?
|
М.б. просто показывать-прятать?
<style>
.hide { display:none; }
</style>
<div id="inf" style="width:250px; height:100px; border:1px solid #000; margin:100px;" >
<div class="information">
<div class="outer-block hide">
<label for="name">Имя:</label>
<input type="text" id="name" placeholder="(ФИО) Иванов Иван Иванович" class="input1"/>
</div>
<div class="outer-block hide">
<label for="telephone">Телефон:</label>
<input type="tel" id="telephone" placeholder="79102020202" class="input1"/>
</div>
</div>
</div>
<div class="m">
<a href="javascript://" onclick="PostRU();" >
<img src="http://javascript.ru/cat/list/dom.gif" width="121" height="62" alt=''/>
</a>
</div>
<div class="m">
<a href="javascript://" onclick="PostTa();">
<img src="http://javascript.ru/cat/list/event.gif" width="121" height="62" alt=''/>
</a>
</div>
<script>
function PostRU() {
document.querySelector("#telephone").parentNode.classList.toggle("hide");
};
function PostTa() {
document.querySelector("#name").parentNode.classList.toggle("hide");
}
</script>
|
Вероятно, это не самое лучшее решение, но на данный момент оно мне подошло.
Огромное спасибо!:) |
| Часовой пояс GMT +3, время: 18:04. |