Получить текст из строки (без вариантов select)
Всем привет, снова у меня проблемы с js и уже долго не могу решить((
Есть html код:
<h2 id="zadanie">
John is
<select class="input">
<option>a</option>
<option>an</option>
<option>are</option>
</select>
honest person</h2>
Есть скрытый input, куда надо поместить текст из строки выше, без html тегов и без вариантов select: <input type="hidden" name="ans1" id="ans1" value=""> Максимум что смог написать это:
test1 = document.getElementById('zadanie').textContent;
document.getElementById('ans1').value=test1;
Этот js вызывается, каждый раз когда я выбираю что-то в select. Данный код, записывает в скрытый инпут так: John is aanarean honest person а надо чтобы было так (к примеру в select выбран вариант 'an'): John is an honest person |
Цитата:
Разделяй и властвуй! (с)
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=windows-1251' />
<!--
<script src='https://code.jquery.com/jquery-latest.js'></script>
<script src="https://code.angularjs.org/1.3.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.3.9/angular-route.js"></script>
-->
<style type='text/css'>
</style>
<script type='text/javascript'>
document.addEventListener('DOMContentLoaded',function(){
document.querySelector('#test select').addEventListener('change',text);
text();
function text(){
var o=document.querySelectorAll('#test span');
var txt=o[0].textContent;
txt+=' '+document.querySelector('#test select').value;
txt+=' '+o[1].textContent;
alert(txt);
};
});
</script>
</head>
<body>
<p id="test">
<span>John is</span>
<select class="input">
<option value='a'>a</option>
<option value='an'>an</option>
<option value='are'>are</option>
</select>
<span>honest person</span>
</p>
</body>
</html>
|
видимые текстовые ноды в элементе
Leon2110,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<script>
document.addEventListener( "DOMContentLoaded" , function() {
zadanie.addEventListener("change", function(event) {
for (var parent, txt, node, temp = [], textNodes = document.createTreeWalker(this, NodeFilter.SHOW_TEXT, null, false); node = textNodes.nextNode();) {
txt = node.nodeValue.trim();
parent = node.parentNode;
if(parent == this || parent.selected) txt && temp.push(txt);
}
ans1.value = temp.join(" ")
})
});
</script>
</head>
<body>
<h2 id="zadanie">
John is
<select class="input" >
<option>a</option>
<option>an</option>
<option>are</option>
</select>
honest person</h2>
<input name="ans1" id="ans1" value="">
</body>
</html>
|
Спасибо за ответы, они оба рабочие. Я даже на радостях чуть усложнил все) Теперь этот селект может быть в любом месте, в начале, в середине в конце и может быть даже не один.
Взял за основу код рони (хоть он и практически не понятен, но работает сразу с несколькими селектами и влюбом месте). Скрин: https://i.ibb.co/MZjKJWN/image.jpg Скрин выше, я добавил в это предложение еще один селект, js успешно отрабатывает и выводит все в input. Чтобы учитель мог сразу сам протестить игру, решил написать мини проверку, ниже есть кнопка, которая аяксом отправляет в php файл эту строку, там эта строка проверяется с правильным ответом из базы и возвращается строка правильно или нет. В общем после отправки ajax и получения результата на экран, js код заполнения input больше не работает (ошибки js в консоли нет, просто больше не записывает в input ничего). К примеру учитель специально отправил ложный вариант, увидел надпись "ответ не верный!", следом исправляет, отправвляет еще раз на проверку, а инпут больше не меняется и постоянно уже "ответ не верный!", надо обновлять страницу и тогда снова все работает, до отправки на проверку. Нет мыслей как сделать, чтобы не переставало работать?(( Цитата:
Игру где вместо select будут input, то есть не выбор из вариантов, а надо самому слова дописать в предложения, уже сделал. Игра с перетаскиванием слов, тоже почти готова. Вот с этой с выбором из вариантов застрял)) |
Цитата:
|
Цитата:
Для таких случаев используется делегирование https://learn.javascript.ru/event-delegation Или придется каждый раз опять "навешивать" обработчики на новые элементы... |
Вот смотрите, мне кажется что дело не в этом (это не точно). Ниже самой игры, на скрине можно видеть есть кнопка "Отправить на проверку", обычная кнопка:
<button type="button" class="btn btn-leo btn-success btn-icon-fixed" onclick="proverka()"><span class="icon-paper-plane"></span>Отправить на проверку</button> Еще чуть ниже кнопки, блок, куда аяксом загружается строка, верно или не верно: <div id="result_divs"> <div id="download_img" style="display:none;"><img src="img/loading.gif" width="100" height="100" /></div> </div> Ну и в самом низу, мой примитивный обработчик, он отправляет ид игры и строку ответа ans1 в пхп файл и оттуда возвращается верно или нет (текст):
<script>
function proverka() {
ans1 = $("#ans1").val();
// game_id = <?php echo $edit_id; ?>;
//Показываем картинку загрузки
//$('div#download_img').css('display', 'block');
//Отправляем ajax-запрос
//$.ajax({
// type:"POST",
// url:"php/test_rez.php",
// data: {"ans1":ans1, "game_id":game_id},
// cache: false,
//success: function(responce){
//Загружаем результат в блок с id=result_divs и прячем картинку загрузки
//$('div#result_divs').html(responce);
// $('div#download_img').css('display', 'none');
//}
// })
}
</script>
Как видно, я почти всю кухню с отправкой аякс закоментарил, ради теста, и даже в этом случае, после нажатия кнопки "Отправить на проверку", js с заполнением input больше не работает(( Думаю что-то не так с ans1 = $("#ans1").val(); - если комментарю и ее, тоесть остается пустая функция function proverka() { }, тогда все работает после нажатия))) Ошибок в консоли нет, чисто. |
Цитата:
|
Цитата:
придумайте для переменной другое имя, не совпадающее с любым id на странице. <input name="ans1" id="ans1" value=""> |
Leon2110,
либо добавьте var
function proverka() {
var ans1 = $("#ans1").val();
иначе строка ans1.value = temp.join(" ") перестанет работать. можно и тут по изобретать выход,
document.querySelector("#ans1").value = temp.join(" ")
но лучше заменить имя и добавить var. |
| Часовой пояс GMT +3, время: 22:16. |