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>
Advertisement
Answer
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>