Не работает стирание класса / добавление стиля.
Здравствуйте.
Подскажите, почему не работает? Есть код, который рисует несколько текстовых блоков с кнопкой <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', '');
}
|
выкиньте свой алерт нафиг. используйте отладчик f12 (в хроме встроенный, т.е. устанавливать не надо)
вот документация как пользоваться отладкой: http://learn.javascript.ru/debugging-chrome если вы сами научитесь отлаживать свой код, то это будет просто замечательно ;) |
skrudjmakdak, ну я смотрю через ф12, а через алерт вывожу значения в яваскрипте.
Кстати, я уже нашел почему не работало!!! Оказывается надо было удалить # в айдишниках, ЛОЛ. Но теперь другой вопрос, как сделать так, чтобы если я нажал 2 раз на кнопку, то форма обратно закрылась т.е. класс обратно приписался? |
вот пример:
<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>
|
skrudjmakdak, у меня, почему-то, не работает ваш вариант, а что писать в куериСелекторАл?
А можно ли как-то сделать это как продолжение этого кода на чистом яваскрипте? function showAnswer(id) {
document.getElementById('hdn_'+id).classList.remove('showAnswer');
}
Чтобы при нажатии менялся value кнопки, а при повторном нажатии форма закрывалась и value менялось обратно. Как-то так. |
Цитата:
открываешь отладчик, вкладка sourses(chrome). выбираешь нужный js файл и ставишь точки останова. и можешь смотреть значения переменных я просто когда тоже начинал, делал как ты. потом понял все прелести отладчика |
skrudjmakdak, а что на счет вопросов повыше?
Я тут пробое всякое, но, пока, не получается. |
<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>
|
Цитата:
Цитата:
Как вариант... <!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>
|
ksa, да я уже нашел ответ, теперь ищу как сделать кое-что дургое...:
Чтобы при нажатии менялся value кнопки, а при повторном нажатии форма закрывалась и value менялось обратно. |
| Часовой пояс GMT +3, время: 05:38. |