Javascript-форум - вставлять переменную в span

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - вставлять переменную в span (https://javascript.ru/forum/misc/76215-vstavlyat-peremennuyu-v-span.html)

Цитата:

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

Пожалуйста, отформатируйте свой код!

'text' + window["action" + (index+1)] + 'text'

возврашает undefined

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 .page"));
document.querySelector(".action span").innerHTML = 'text' + ' ' + window["action" + (index+1)] + ' text';
if (target.querySelector("img")) {
alert("heloo world");
}
}
});
});

Hovik,

<!DOCTYPE html>

<html>
<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <style type="text/css">
    </style>

    <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 .page"), target), str =  'text  ' + window["action" + (index+1)] + ' text';
            document.querySelector(".action span").innerHTML = str;
            if (target.querySelector("img")) {
                alert("heloo world");
            }
        }
    });
});
    </script>
</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></span>
 </div>
</body>
</html>

Уважаемые рони, спасибо что пытались мне помочь, но не получилось.
функция работает до 10 дива, а далее undefined, там 4 pages внутри 40 page то-есть 1pages> 10page + 1pages> 10page + 1pages> 10page + 1pages> 10page
здесь по моему нужна работать с остатком от деления 10,
использовать оператор if
цикл for
return
это моё непрофессиональное мнение, я javascript очень мало знаю, но думаю что здесь проблема в структуре кода
нужна найти все диви в body class page создавая массив
из наших переменных создавать массив
вычислять индекс нажатого кнопку
патом из индекса вычислять остаток деление от 10
и с помощью результата вытаскивать из нашего массива по индексу нужную переменный.

Hovik,
не могу помочь.

Этот код написал я и в нем переменный (x) не магу вычислить. Это индекс из массива нажатого кнопку, поможете ?

<!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="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="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="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 id="action">text</span>
</div>

<script>

var action = [20, 18, 16, 14, 12, 10, 8, 6, 4, 2]; //наши переменый
var buttons = document.getElementsByClassName("page"); // все класы в массиве
var x = 34; // индекс нажатаго кнопку ?
var y = x % 10; // остаток от деление
var z = action[y-1]; // получаем нужны резултат
document.getElementById('action').innerHTML = 'text ' + z + ' %' + ' text'; //выставляем значения

console.log(action);
console.log(buttons);
console.log(x);
console.log(y);
console.log(z);

</script>
</body>
</html>

Люди наконец то у меня все получилось, хотя хочу признаться намного благодаря профессиональному программисту рони,
вот код если каму нибудь понадобиться.

var text1 = "text";
var text2 = "text";
let actions = [20, 18, 16, 14, 12, 10, 8, 6, 4, 2]
let buttons = document.querySelectorAll('.page');
for (let i = 0; i < buttons.length; i++) {
let button = buttons[i];
let result = i % 10;
button.onclick = function(e) {
document.querySelector(".action span").innerHTML = text1 + actions[result] + "%" + text2;
};
};

Hovik,

Пожалуйста, отформатируйте свой код!

Для этого его можно заключить в специальные теги: js/css/html и т.п., например:

[html run]
... минимальный код страницы с вашей проблемой
[/html]

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.