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 historia that I would like to use in order that, every time the button Siguiente is clicked the text of the html element would change.
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>Here, I have given a basic example where i have created a variable that will count the no of clicks and will increase its value. Similarly, the function will show the index value from the array based on that variable:
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>if i understand your issue, you want to display your history , so you can try this :
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>