Entonces, mi proyecto tiene la tarea de que cada vez que se haga clic en el botón siguiente , el texto cambiará. Hasta ahora, he logrado hacer eso manipulando el DOM. Pero tengo una matriz historia que me gustaría usar para que, cada vez que se haga clic en el botón Siguiente , el texto de la
el elemento html cambiaría.
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>Aquí, he dado un ejemplo básico en el que he creado una variable que contará el número de clics y aumentará su valor. De manera similar, la función mostrará el valor del índice de la matriz en función de esa 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>Si entiendo su problema, desea mostrar su historial, por lo que puede intentar esto:
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>