Форум

Webtest · #1 (**permalink**) 08.09.2014, 12:32

Здравствуйте.

Подскажите, почему не работает?
Есть код, который рисует несколько текстовых блоков с кнопкой

<div class="showAnswer" id="hdn_<?php echo $showMessage['id'][$num]; ?>">
	<textarea name="answerArea" class="textareaForAnswer"></textarea>
	<input type="button" class="questionBtn" name="sendAnswer" value="Послать ответ">
</div>

Вот цсс дива: div.showAnswer {display: none;} т.е. он скрытый.
Вот кнопка:

<input type="button" class="questionBtn" name="answer" onclick='showAnswer(<?php echo $showMessage['id'][$num]; ?>)' value="Ответить">

Почему при нажатии на кнопку ничего не происходит? Вот JS код:
1 вариант:

function showAnswer(id) {
		// alert(id);
		document.getElementById('#hdn_'+id).removeClass('div.showAnswer');
	}

2 вариант:

function showAnswer(id) {
		// alert(id);
		document.getElementById('#hdn_'+id).style.display = 'block';
	}

Алерт выводит тот id на который я нажимаю, т.е. согласно этому коду должен либо убираться класс у id, который делает невидимым блок.
Во-втором случае должен менятся стиль на блок.
Но ни 1, ни во 2 случае ничего не происходит. Почему?
Вот еще 3 вариант:

function showAnswer(id) {
		document.getElementById('#hdn_'+id).className = document.getElementById('#hdn_'+id).className.replace('showAnswer', '');
	}

skrudjmakdak · #2 (**permalink**) 08.09.2014, 12:38

выкиньте свой алерт нафиг. используйте отладчик f12 (в хроме встроенный, т.е. устанавливать не надо)

вот документация как пользоваться отладкой:
http://learn.javascript.ru/debugging-chrome

если вы сами научитесь отлаживать свой код, то это будет просто замечательно

Webtest · #3 (**permalink**) 08.09.2014, 12:41

skrudjmakdak, ну я смотрю через ф12, а через алерт вывожу значения в яваскрипте.
Кстати, я уже нашел почему не работало!!! Оказывается надо было удалить # в айдишниках, ЛОЛ.

Но теперь другой вопрос, как сделать так, чтобы если я нажал 2 раз на кнопку, то форма обратно закрылась т.е. класс обратно приписался?

skrudjmakdak · #4 (**permalink**) 08.09.2014, 12:46

вот пример:

<html>
<head>
	<style>
	div
	{
	width: 50px;
	height: 50px;
	margin: 10px;
	background-color: red;
	}
	</style>
    
</head>
<body>
	<div></div><div></div>
	
	<script type="text/javascript">
	var divs = document.querySelectorAll('div');
	divs[0].onclick = function () {
		this.style.visibility = 'hidden';
		divs[1].style.visibility = 'visible';
	}
	
	divs[1].onclick = function () {
		this.style.visibility = 'hidden';
		divs[0].style.visibility = 'visible';
	}
	</script>
</body>
</html>

Webtest · #5 (**permalink**) 08.09.2014, 12:53

skrudjmakdak, у меня, почему-то, не работает ваш вариант, а что писать в куериСелекторАл?
А можно ли как-то сделать это как продолжение этого кода на чистом яваскрипте?

function showAnswer(id) {
document.getElementById('hdn_'+id).classList.remove('showAnswer');
}

Чтобы при нажатии менялся value кнопки, а при повторном нажатии форма закрывалась и value менялось обратно.
Как-то так.

skrudjmakdak · #6 (**permalink**) 08.09.2014, 12:54

Сообщение от Webtest

skrudjmakdak, ну я смотрю через ф12, а через алерт вывожу значения в яваскрипте.

не нужно этого делать, дал ссылку. почитай. там все гораздо удобней

открываешь отладчик, вкладка sourses(chrome). выбираешь нужный js файл и ставишь точки останова. и можешь смотреть значения переменных

я просто когда тоже начинал, делал как ты. потом понял все прелести отладчика

Webtest · #7 (**permalink**) 08.09.2014, 13:12

skrudjmakdak, а что на счет вопросов повыше?
Я тут пробое всякое, но, пока, не получается.

skrudjmakdak · #8 (**permalink**) 08.09.2014, 13:30

<html>
<head>
</head>
<body>
	<div>
		<div>????? ?? ?????? 1</div>
		<div><input type="button" value="click me" countClick="0" onclick="clk(this);"></div>
	</div>
	<div>
		<div>????? ?? ?????? 2</div>
		<div><input type="button" value="click me" countClick="0" onclick="clk(this);"></div>
	</div>
	<script>
	function clk (ths) {
		var countClick = ths.getAttribute('countClick');
		++countClick;
		if (countClick == 2)
			ths.parentNode.parentNode.style.display = 'none';
		else
			ths.setAttribute('countClick', countClick);
	}
	</script>
</body>
</html>

ksa · #9 (**permalink**) 08.09.2014, 13:36

Сообщение от Webtest

Подскажите, почему не работает?

Оно и не должно работать...

Сообщение от Webtest

Но ни 1, ни во 2 случае ничего не происходит. Почему?
Вот еще 3 вариант

К чему таки есложности...
Как вариант...

<!DOCTYPE html>
<html>
<head>
<!--
<script src='http://code.jquery.com/jquery-latest.js'></script>
<link rel='stylesheet type=text/css href=tmp.css' />
-->
<style type='text/css'>
div.showAnswer {
	display: none;
}
</style>
<script type='text/javascript'>
function showAnswer(N) {
	document.getElementById('hdn_'+N).className='';
};
</script>
</head>
<body>
<div class="showAnswer" id="hdn_1">
	<textarea name="answerArea" class="textareaForAnswer"></textarea>
	<input type="button" class="questionBtn" name="sendAnswer" value="Послать ответ">
</div>
<input type="button" class="questionBtn" name="answer" onclick='showAnswer(1)' value="Ответить">
</body>
</html>

Webtest · #10 (**permalink**) 08.09.2014, 13:38

ksa, да я уже нашел ответ, теперь ищу как сделать кое-что дургое...:
Чтобы при нажатии менялся value кнопки, а при повторном нажатии форма закрывалась и value менялось обратно.

Форум

Справочник

Discord чат

Курсы javascript