Skip to content
Advertisement

How to change text using arrays and 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 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>
User contributions licensed under: CC BY-SA
3 People found this is helpful
Advertisement