Уважаемые
рони, возможно вам скорее хочется учить, чем вместо участника написать код, но поверите я пытаюсь просто пока еще не получается и по этому прошу у вас помаши.
Я поменял логику вашего кода, и оно устраивает меня с исключением одного нюанса.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div class="pages">
<div class="page"><img src="#" alt="#">кнопка 1</div>
<div class="page"><span class="page-txt">кнопка 2</span></div>
<div class="page"><span class="page-txt">кнопка 3</span></div>
<div class="page"><span class="page-txt">кнопка 4</span></div>
<div class="page"><span class="page-txt">кнопка 5</span></div>
<div class="page"><span class="page-txt">кнопка 6</span></div>
<div class="page"><span class="page-txt">кнопка 7</span></div>
<div class="page"><span class="page-txt">кнопка 8</span></div>
<div class="page"><span class="page-txt">кнопка 9</span></div>
<div class="page"><span class="page-txt">кнопка 10</span></div>
</div>
<div class="action">
<span>text</span>
</div>
<script>
var action1 = '20%';
var action2 = '18%';
var action3 = '16%';
var action4 = '14%';
var action5 = '12%';
var action6 = '10%';
var action7 = '8%';
var action8 = '6%';
var action9 = '4%';
var action10 = '2%';
document.addEventListener("DOMContentLoaded", function() {
document.querySelector(".pages").addEventListener( "click", function(event) {
var target = event.target;
if (target = target.closest(".page")) {
var index = [].indexOf.call(document.querySelectorAll(".pages.pa ge");
document.querySelector(".action span").innerHTML = 'text' + ' ' + action1 + 'text';
if (target.querySelector("img")) {
alert("heloo world");
}
}
});
});
</script>
</body>
</html>
вместо action1 нужна вставлять функцию который -- будить
сначала выяснять какая из 40 класс page нажата, {например 26-ой}
второе найти остаток от деления к 10 (потому что вариант ответов 10) {результат будет 6 }
третий не знаю по каким образом, но выставлялось шестое переменный action6