How to change text using arrays and DOM-CodePudding

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 >
        <div id="base">
            <p id="text">Text</p>
        </div>
        <div id="option-buttons" >
        <button id='finish' >Terminar juego</button>  
        <button id='next' >Siguiente</button>            
        </div>
    </section>    
    <script type='text/javascript' src="app.js"></script>
    
</body>
</html>

CodePudding user response：

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 >
        <div id="base">
            <p id="text">Text</p>
        </div>
        <div id="option-buttons" >
        <button id='finish' >Terminar juego</button>  
        <button id='next' >Siguiente</button>            
        </div>
    </section>    
    <script type='text/javascript' src="app.js"></script>
    
</body>
</html>

CodePudding user response：

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 >
        <div id="base">
            <p id="text">Text</p>
        </div>
        <div id="option-buttons" >
        <button id='finish' >Terminar juego</button>  
        <button id='next' >Siguiente</button>            
        </div>
    </section>    
    <script type='text/javascript' src="app.js"></script>
    
</body>
</html>