Добрый день!
Пытаюсь сделать подобие викторины. Данные считываются из файла, после в цикле while идет их перебор. На странице виртуальная клавиатура, пользователь должен ввести какую либо информацию в зависимости от содержимого элемента считанного массива. Начальный код выглядит так:
...
<div class="read_value">
<script>
var value = <?php echo json_encode($result); ?>; // $result прочитанные из файла данные.
var i = 0;
while(i<value.length){
document.write(value[i]+'--');
i=i+1;
}
</script>
</div>
<div class="main"> // в этом блоке выводится поле ввода, кнопки для работы с ним и виртуальная клава
<input type="text" id="myinput">
<button id="okbutton">Ok</button>
.... // здесь идут остальные кнопки
</div>
В таком виде все нормально, данные из файла получаются и выводятся на странице в div class="read_value".
Дальше хочется сделать, чтобы элементы выводились по одному и по клику на кнопку "Ок" считывалась информация из поля ввода и в зависимости от введенного в поле ввода, выводился следующий элемент или корректировалось поле ввода.
Все, что касается считывания данных из поля ввода и его изменения трудностей не вызывает, но на привязке к циклу события клика по кнопке "Ок" просто какой-то жесткий затык, не получается и все.... Не хватает знаний, чтобы понять как правильно написать эту реализацию. Прогуглил кучу всего, но все равно не понял как реализовать.
Пытаюсь для начала сделать, чтобы элементы value выводились по очереди, по клику на кнопку "Ок", но дальше вывода первого элемента цикл не идет.
Делаю так, но выходит только первый элемент массива и дальше бесконечный цикл как я понимаю, потому что по клику по кнопке "Ок" ничего не происходит:
<div class="read_value">
<script>
var value = <?php echo json_encode($result); ?>;
var i = 0;
const okbut = document.querySelector('#okbutton')
while(i<value.length){
document.write(value[i]+'--');
okbut.addEventListener('click', function(i){
i=i+1;
})
}
</script>
</div>
Пытался по разному делать и через addEventListener и через .onclick (страница сразу виснет на этапе загрузки) ничего не выходит. Не понимаю как правильно. Подскажите как правильно написать проход цикла с последовательным выводом элементов по клику на кнопку "Ок". Буду благодарен, если с комментариями.
