Форум

Leon2110 · #1 (**permalink**) 27.01.2020, 01:09

Всем привет, снова у меня проблемы с 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

ksa · #2 (**permalink**) 27.01.2020, 08:07

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

у меня проблемы с js и уже долго не могу решить((

Книжки видать так и не читаешь...

Разделяй и властвуй! (с)

<!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>

рони · #3 (**permalink**) 27.01.2020, 08:15

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>

Leon2110 · #4 (**permalink**) 28.01.2020, 01:24

Спасибо за ответы, они оба рабочие. Я даже на радостях чуть усложнил все) Теперь этот селект может быть в любом месте, в начале, в середине в конце и может быть даже не один.

Взял за основу код рони (хоть он и практически не понятен, но работает сразу с несколькими селектами и влюбом месте).

Скрин: https://i.ibb.co/MZjKJWN/image.jpg

Скрин выше, я добавил в это предложение еще один селект, js успешно отрабатывает и выводит все в input. Чтобы учитель мог сразу сам протестить игру, решил написать мини проверку, ниже есть кнопка, которая аяксом отправляет в php файл эту строку, там эта строка проверяется с правильным ответом из базы и возвращается строка правильно или нет.
В общем после отправки ajax и получения результата на экран, js код заполнения input больше не работает (ошибки js в консоли нет, просто больше не записывает в input ничего). К примеру учитель специально отправил ложный вариант, увидел надпись "ответ не верный!", следом исправляет, отправвляет еще раз на проверку, а инпут больше не меняется и постоянно уже "ответ не верный!", надо обновлять страницу и тогда снова все работает, до отправки на проверку.

Нет мыслей как сделать, чтобы не переставало работать?((

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

Книжки видать так и не читаешь...

Постоянно, что-то изучаю, но js плохо дается, вон уже почти сервис по созданию таких мелких игр написал) Будет несколько вариантов игр которые можно создавать, после сделаю возможность создавать тест, под тестом я понимаю оболочку в которую можно включить сколько угодно этих мелких игр и уже эти тесты отдавать ученикам. Работа "бесплатная", но интересная.
Игру где вместо select будут input, то есть не выбор из вариантов, а надо самому слова дописать в предложения, уже сделал. Игра с перетаскиванием слов, тоже почти готова. Вот с этой с выбором из вариантов застрял))

рони · #5 (**permalink**) 28.01.2020, 05:43

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

и получения результата на экран,

возможно вывод результата некорректен

ksa · #6 (**permalink**) 28.01.2020, 07:20

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

В общем после отправки ajax и получения результата на экран, js код заполнения input больше не работает

На новом контенте просто нет обработчиков...

Для таких случаев используется делегирование
https://learn.javascript.ru/event-delegation
Или придется каждый раз опять "навешивать" обработчики на новые элементы...

Leon2110 · #7 (**permalink**) 28.01.2020, 09:39

Вот смотрите, мне кажется что дело не в этом (это не точно). Ниже самой игры, на скрине можно видеть есть кнопка "Отправить на проверку", обычная кнопка:

<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() { }, тогда все работает после нажатия)))
Ошибок в консоли нет, чисто.

ksa · #8 (**permalink**) 28.01.2020, 09:44

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

мне кажется что дело не в этом

Так тестируй свой код шаг за шагом и смотри в чем дело... Это и называется "отладкой" алгоритма или программы.

рони · #9 (**permalink**) 28.01.2020, 09:46

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

ans1 = $("#ans1").val();

так делать опасно!

придумайте для переменной другое имя, не совпадающее с любым id на странице.
<input name="ans1" id="ans1" value="">

рони · #10 (**permalink**) 28.01.2020, 09:51

Leon2110,
либо добавьте var

function proverka() {

var ans1 = $("#ans1").val();

иначе строка ans1.value = temp.join(" ") перестанет работать.
можно и тут по изобретать выход,

document.querySelector("#ans1").value = temp.join(" ")

но лучше заменить имя и добавить var.

Форум

Справочник

Discord чат

Курсы javascript