Как изменить текст с помощью массивов и DOM

So my proyect has the task that every time the siguiente button is clicked the text will change. So far, I have maneged to do that manupulating the DOM. But I have an array история that I would like to use in order that, every time the button Сигуиенте is clicked the text of the

HTML-элемент изменится.

var section = document.querySelector('seccion');
var container = document.querySelector('container');

var optionButtons = document.querySelector('option-buttons')
var button = document.getElementById('next');

var next = function() {
    var historia = ['texto 1', 'texto 2', 'texto 3', 'texto 4', 'texto 5', 'texto 6', 'texto 7', 'texto 8', 'texto 9', 'texto 10', 'texto 11', 'texto 12', 'texto 13', 'texto 14', 'texto 15']
    var base = document.getElementById('base');
    base.innerHTML = '<p> aca hay nuevo texto </p> <h1>ESTO DEBE SER MAS GRANDE</h1>'
    
};

var siguiente = button.addEventListener('click', next, true);
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>text Adventure</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=DotGothic16&display=swap" rel="stylesheet">
<link rel="shortcut icon" href="data:image/x-icon;," type="image/x-icon"> 
<link href="style.css" rel="stylesheet">

</head>
<body>
<section id="seccion">    
    <div class="container">
        <div id="base">
            <p id="text">Text</p>
        </div>
        <div id="option-buttons" class="btn-grid">
        <button id='finish' class="btn">Terminar juego</button>  
        <button id='next' class="btn">Siguiente</button>            
        </div>
    </section>    
    <script type='text/javascript' src="app.js"></script>
    
</body>
</html>
section = document.querySelector('#seccion') это нотация CSS
Mister Jojo 17.05.2022 17:42
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Будучи разработчиком веб-приложений, легко впасть в заблуждение, считая, что приложение без JavaScript не имеет права на жизнь. Нам становится удобно...
Введение в технологический стек Twitch
Введение в технологический стек Twitch
В этой статье мы подробно рассмотрим стек Twitch, который подразделяется на следующий набор технологий:
8 полезных HTML-тегов, которые лучше использовать вместо <div>
8 полезных HTML-тегов, которые лучше использовать вместо <div>
Когда я только начинал изучать html, я использовал div для всего, это был один из первых тегов, которые я выучил, и казалось, что он работает в любой...
HTML5: API локального хранилища (Local Storage)
HTML5: API локального хранилища (Local Storage)
LocalStorage - это простой способ хранения данных в браузере пользователя.
Доступность HTML - программирование с инклюзивной перспективой
Доступность HTML - программирование с инклюзивной перспективой
Представьте, что вы хотите поехать на пляж. Представьте, что вы упорно трудились весь год и заслужили это. Прибыв на место, вы обнаруживаете, что...
Именование классов CSS: Конвенция именования BEM
Именование классов CSS: Конвенция именования BEM
Сопровождаемость кода, сама по себе, является пульсирующим эффектом нескольких факторов. Когда часть программного обеспечения читабельна, ясна,...
0
1
28
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

если я понимаю вашу проблему, вы хотите отобразить свою историю, поэтому вы можете попробовать это:

var section = document.querySelector('seccion');
var container = document.querySelector('container');

var optionButtons = document.querySelector('option-buttons')
var button = document.getElementById('next');
var historiaLevel = 0;

var next = function() {
    var historia = ['texto 1', 'texto 2', 'texto 3', 'texto 4', 'texto 5', 'texto 6', 'texto 7', 'texto 8', 'texto 9', 'texto 10', 'texto 11', 'texto 12', 'texto 13', 'texto 14', 'texto 15']
    var base = document.getElementById('base');
    if(historiaLevel == 0)    
      base.innerHTML = '<p> aca hay nuevo texto </p> <h1>ESTO DEBE SER MAS GRANDE</h1>'    
     else      
       base.innerHTML = historia[historiaLevel-1]  
       
     historiaLevel = ((historiaLevel) == historia.length) ? 0 : historiaLevel + 1
};

var siguiente = button.addEventListener('click', next, true);
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>text Adventure</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=DotGothic16&display=swap" rel="stylesheet">
<link rel="shortcut icon" href="data:image/x-icon;," type="image/x-icon"> 
<link href="style.css" rel="stylesheet">

</head>
<body>
<section id="seccion">    
    <div class="container">
        <div id="base">
            <p id="text">Text</p>
        </div>
        <div id="option-buttons" class="btn-grid">
        <button id='finish' class="btn">Terminar juego</button>  
        <button id='next' class="btn">Siguiente</button>            
        </div>
    </section>    
    <script type='text/javascript' src="app.js"></script>
    
</body>
</html>

Здесь я привел базовый пример, в котором я создал переменную, которая будет подсчитывать количество кликов и увеличивать ее значение. Точно так же функция покажет значение индекса из массива на основе этой переменной:

var section = document.querySelector('seccion');
var container = document.querySelector('container');

var optionButtons = document.querySelector('option-buttons')
var button = document.getElementById('next');
var no_of_clicks = 0;
var next = function() {
    var historia = ['texto 1', 'texto 2', 'texto 3', 'texto 4', 'texto 5', 'texto 6', 'texto 7', 'texto 8', 'texto 9', 'texto 10', 'texto 11', 'texto 12', 'texto 13', 'texto 14', 'texto 15']
    var base = document.getElementById('base');
    base.innerHTML = `<p> ${historia[no_of_clicks]} </p> <h1>ESTO DEBE SER MAS GRANDE</h1>`
no_of_clicks == (historia.length - 1) ? no_of_clicks = 0 : no_of_clicks = no_of_clicks + 1;
    
};

var siguiente = button.addEventListener('click', next, true);
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>text Adventure</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=DotGothic16&display=swap" rel="stylesheet">
<link rel="shortcut icon" href="data:image/x-icon;," type="image/x-icon"> 
<link href="style.css" rel="stylesheet">

</head>
<body>
<section id="seccion">    
    <div class="container">
        <div id="base">
            <p id="text">Text</p>
        </div>
        <div id="option-buttons" class="btn-grid">
        <button id='finish' class="btn">Terminar juego</button>  
        <button id='next' class="btn">Siguiente</button>            
        </div>
    </section>    
    <script type='text/javascript' src="app.js"></script>
    
</body>
</html>

Другие вопросы по теме