Arrays two dimensions

Question

Arrays two dimensions

Navigation

#1 by (0 votes)
#2 by (0 votes)
#3 by (0 votes)

0

I want to make a mini app that tells you how much time each tea should make from the type of tea and how a specific person would do it (for example, George Orwell left it about 45 seconds less).

I have two select drop-down, to which the info is added via a javascript loop that takes them from an array. The problem is that the array should include the name of the tea (Earl Gray, for example) but contain a value (in seconds) that would be what would be added to the result.

Currently, the arrays only include time, since I do not know how to make an array in which each field includes a name for more time and that this info is added to the lists. I add the code:

// Añadiendo los tipos de tea

//Escogiendo el elemento
var selectTea = document.getElementById('tea');


//Array
var teas = [180, 300, 240]


//Loop
for (var i = 0; i < teas.length; i++) {

    // creando la nueva option
    var opt = document.createElement('option');

    // Añadiendo texto al elemento (opt)
    opt.innerHTML = teas[i];

    //Añadiendo un valor al elemento (opt)
    opt.value = teas[i];

    // Añadiendo opt al final del selector (sel)
    selectTea.appendChild(opt);

}

// Añadiendo las personas

//Escogiendo el elemento
var selectPeople = document.getElementById('ho');


//Array
var people = [-50, +80, +30]


//Loop
for (var i = 0; i < people.length; i++) {

    // creando la nueva option
    var opt = document.createElement('option');

    // Añadiendo texto al elemento (opt)
    opt.innerHTML = people[i];

    //Añadiendo un valor al elemento (opt)
    opt.value = people[i];

    // Añadiendo opt al final del selector (sel)
    selectPeople.appendChild(opt);

}

//Funcion sumar los tiempos, Number para convertir los string a numero

function totalTime() {
  var tea = Number(selectTea.value);
  var peo = Number(selectPeople.value);
  alert(tea + peo);
}

.wrapper {
    background-color: white;
    width: 95%;
    height: 100%;
    margin: auto;
    padding: 10px;
}

body {
    background-color: deepskyblue;
}

.title {
    
    text-align: center;
    color: black;
    font-family: 'Roboto';
    
    
}

.tea {
    width: 50%;
    float: left;
    text-align: center;
}

.likeho {
    width: 50%;
    float: left;
    text-align: center;
}

.resultado {
    text-align: center;
    margin-top: 100px;
    font-family: 'Roboto';
}

.desplegables {
    height: 100px;
    padding: 20px;
}

select {
    font-size: 90px;
    border: solid black 5px; 
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,600" rel="stylesheet" type="text/css">
    <link href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" type="text/css">
    <link type="text/css" rel="stylesheet" href="style.css">

    <title>Teassistant</title>
</head>

<body>
    <div class="wrapper">


        <div class="title">
            <h1>Teassistant</h1>
        </div>
        <div class="desplegables">
            <div class="tea">


                <select id="tea" name="tea">

            </select>

            </div>

            <div class="likeho">

                <select id="ho" name="ho">
  
            </select>


            </div>
        </div>

        <div>

            <h1 class="resultado">Resultado en segundos <br>


                <input type="button" onClick="totalTime()" Value="Suma" />


            </h1>



        </div>



    </div>

    <script src="app.js"></script>
</body>

</html>

javascript

asked by Joan Subirats Llaveria 20.06.2017 в 16:41

source

3 answers

0

You create a two-dimensional array:

var teas = [
  ['te1', 20],
  ['te2', 40],
  ['te3', 60]
];

And then you call it by position:

teas[0][0] mostrará 'te1';

I hope it serves you.

answered by 20.06.2017 в 16:52

0

To create two-dimensional Arrays, you only have to make the values of the array, are arrays:

var matriz=[ [00,01] , [10,11], ... ];

To access the data, indicate the two dimensions:
matriz[0][0] = 00 ...

By the way, if the data indicates values that mean different things, you could consider creating an array of objects.
var matriz = [ {tiempo:0, info:"info0"} , {tiempo:1, info:"info1}, ...];

In this way to obtain the data is: matriz[0].tiempo = 0, matriz[1].info ="info1" ...

answered by 20.06.2017 в 16:50

HTML: Get all the files of an input file [] Create tables from mysql queries

score 0 · Accepted Answer

What I would do is that the elements of the array are objects with different properties (name and time) instead of creating a two-dimensional array.

I think that the code is more readable:

// Añadiendo los tipos de tea

//Escogiendo el elemento
var selectTea = document.getElementById('tea');


//Array
var teas = [
  {name: 'Earl Grey', time: 180},
  {name: 'Otro té', time: 300},
  {name: 'Último té', time: 240 }];


//Loop
for (var i = 0; i < teas.length; i++) {

    // creando la nueva option
    var opt = document.createElement('option');

    // Añadiendo texto al elemento (opt)
    opt.innerHTML = teas[i].name;

    //Añadiendo un valor al elemento (opt)
    opt.value = teas[i].time;

    // Añadiendo opt al final del selector (sel)
    selectTea.appendChild(opt);

}

// Añadiendo las personas

//Escogiendo el elemento
var selectPeople = document.getElementById('ho');


//Array
var people = [
  {name: 'George Orwell', time: -50 },
  {name: 'Otro personaje', time: 80 },
  {name: 'Y otro más', time: 30 }
  ];


//Loop
for (var i = 0; i < people.length; i++) {

    // creando la nueva option
    var opt = document.createElement('option');

    // Añadiendo texto al elemento (opt)
    opt.innerHTML = people[i].name;

    //Añadiendo un valor al elemento (opt)
    opt.value = people[i].time;

    // Añadiendo opt al final del selector (sel)
    selectPeople.appendChild(opt);

}

//Funcion sumar los tiempos, Number para convertir los string a numero

function totalTime() {
  var tea = Number(selectTea.value);
  var peo = Number(selectPeople.value);
  alert(tea + peo);
}

.wrapper {
    background-color: white;
    width: 95%;
    height: 100%;
    margin: auto;
    padding: 10px;
}

body {
    background-color: deepskyblue;
}

.title {
    
    text-align: center;
    color: black;
    font-family: 'Roboto';
    
    
}

.tea {
    width: 50%;
    float: left;
    text-align: center;
}

.likeho {
    width: 50%;
    float: left;
    text-align: center;
}

.resultado {
    text-align: center;
    margin-top: 100px;
    font-family: 'Roboto';
}

.desplegables {
    height: 100px;
    padding: 20px;
}

select {
    font-size: 40px;
    border: solid black 5px; 
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,600" rel="stylesheet" type="text/css">
    <link href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" type="text/css">
    <link type="text/css" rel="stylesheet" href="style.css">

    <title>Teassistant</title>
</head>

<body>
    <div class="wrapper">


        <div class="title">
            <h1>Teassistant</h1>
        </div>
        <div class="desplegables">
            <div class="tea">


                <select id="tea" name="tea">

            </select>

            </div>

            <div class="likeho">

                <select id="ho" name="ho">
  
            </select>


            </div>
        </div>

        <div>

            <h1 class="resultado">Resultado en segundos <br>


                <input type="button" onClick="totalTime()" Value="Suma" />


            </h1>



        </div>



    </div>

    <script src="app.js"></script>
</body>

</html>