Problems with html select

Asked

Viewed 124 times

1

I have the following html and javascript codes: 

/**
 * Created by Erick on 22/11/2014.
 */

var data = new Date();
var meses = new Array("Janeiro", "Fevereiro", "Março", "Abril", "Maio", "Junho", "Julho", "Agosto", "Setembro", "Outubro", "Novembro", "Dezembro");
var dias = new Array("Domingo", "Segunda-feira", "Terça-feira", "Quarta-feira", "Quinta-feira", "Sexta-feira", "Sabado");

var dia = data.getDay();
var dian = data.getDate();
var mes = data.getMonth()
var ano = data.getFullYear()

function proxSemana() {
    while(dia != 1){
        proxDia();
    }
}

function proxDia(){
    dia++;
    if(dia > 6){
        dia = 0;
    }
    dian++;
    if(meses[mes] == "Janeiro" || meses[mes] == "Março" || meses[mes] == "Maio" || meses[mes] == "Julho" || meses[mes] == "Agosto" || meses[mes] == "Outubro" || meses[mes] == "Dezembro"){
        if(dian > 31){
            dian = 1;
            mes++;
            if(mes > 11){
                mes = 0;
                ano++;
            }
        }
    }else if(meses[mes] == "Abril" || meses[mes] == "Junho" || meses[mes] == "Setembro" || meses[mes] == "Novembro"){
        if(dian > 30){
            dian = 1;
            mes++;
        }

    }else{
        if(dian > 28){
            dian = 1;
            mes++;
        }
    }

}


proxDia();
proxSemana();
document.write(dias[dia]  + ", " + dian + " de " + meses[mes] + " de " + ano + "<br>");
proxDia()
proxSemana()
document.write(dias[dia]  + ", " + dian + " de " + meses[mes] + " de " + ano + "<br>");
proxDia()
proxSemana()
document.write(dias[dia]  + ", " + dian + " de " + meses[mes] + " de " + ano + "<br>");
proxDia()
proxSemana()
document.write(dias[dia]  + ", " + dian + " de " + meses[mes] + " de " + ano + "<br>");
proxDia()
proxSemana()
document.write(dias[dia]  + ", " + dian + " de " + meses[mes] + " de " + ano + "<br>");
proxDia()
proxSemana()
document.write(dias[dia]  + ", " + dian + " de " + meses[mes] + " de " + ano + "<br>");
proxDia()
proxSemana()
document.write(dias[dia]  + ", " + dian + " de " + meses[mes] + " de " + ano + "<br>");
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>SI1</title>
        <link rel="stylesheet" href="css/bootstrap.css">
        <script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
        <script type="text/javascript" src="js/script_pagina3.js"></script>

    </head>

    <body>

    <select>
        <option value="1° Semana"></option>
        <option value="2° Semana"></option>
        <option value="3° Semana"></option>
        <option value="4° Semana"></option>
        <option value="5° Semana"></option>
        <option value="6° Semana"></option>
    </select>

    </body>

</html>

And I would like to make a form with a select whose options were the 6 Document.write javascript code, but I could not.

javascript html

2 answers

3


I suggest another, easier-to-maintain approach.

var data = new Date();
var segunda = segundaMaisProxima(data);
var meses = new Array("Janeiro", "Fevereiro", "Março", "Abril", "Maio", "Junho", "Julho", "Agosto", "Setembro", "Outubro", "Novembro", "Dezembro");
var dias = new Array("Domingo", "Segunda-feira", "Terça-feira", "Quarta-feira", "Quinta-feira", "Sexta-feira", "Sabado");

function segundaMaisProxima(d) {
    var diaSemana = d.getDay();
    var diff = d.getDate() + (1 - diaSemana);
    return new Date(d.setDate(diff));
}

function gerarTexto(d) {
    return dias[d.getDay()] + ", " + d.getDate() + " de " + meses[d.getMonth()] + " de " + d.getFullYear();
}

$('select option').each(function (i) {
    segunda.setDate(segunda.getDate() + (i ? 7 : 0));
    this.innerHTML = gerarTexto(segunda);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
    <option value="1° Semana"></option>
    <option value="2° Semana"></option>
    <option value="3° Semana"></option>
    <option value="4° Semana"></option>
    <option value="5° Semana"></option>
    <option value="6° Semana"></option>
</select>

jsFiddle: http://jsfiddle.net/yekh9ucs/

So it calculates the first Monday and generates the next ones by adding 7 days to each iteration of the loop that runs all option that select has.

  • 1

    Really, it looks much better, thank you!

  • But if I want to add this javascript code as the title of a div, in the same way as in select, is it possible? Only that instead of appearing only the next Monday "Monday, November 24, 2014", appear next week "Monday, November 24, 2014 - Sunday, November 30, 2014", I was implementing this using the proxDia and proxSemana functions I created, but your way seems to be much more practical.

1

I suggest you later try to put this sequence of commands into a repeat structure.

As for the use of select, you can do this using the DOM interface provided in Javascript.

/**
 * Created by Erick on 22/11/2014.
 */

var data = new Date();
var meses = new Array("Janeiro", "Fevereiro", "Março", "Abril", "Maio", "Junho", "Julho", "Agosto", "Setembro", "Outubro", "Novembro", "Dezembro");
var dias = new Array("Domingo", "Segunda-feira", "Terça-feira", "Quarta-feira", "Quinta-feira", "Sexta-feira", "Sabado");

var dia = data.getDay();
var dian = data.getDate();
var mes = data.getMonth()
var ano = data.getFullYear()

function proxSemana() {
    while(dia != 1){
        proxDia();
    }
}

function proxDia(){
    dia++;
    if(dia > 6){
        dia = 0;
    }
    dian++;
    if(meses[mes] == "Janeiro" || meses[mes] == "Março" || meses[mes] == "Maio" || meses[mes] == "Julho" || meses[mes] == "Agosto" || meses[mes] == "Outubro" || meses[mes] == "Dezembro"){
        if(dian > 31){
            dian = 1;
            mes++;
            if(mes > 11){
                mes = 0;
                ano++;
            }
        }
    }else if(meses[mes] == "Abril" || meses[mes] == "Junho" || meses[mes] == "Setembro" || meses[mes] == "Novembro"){
        if(dian > 30){
            dian = 1;
            mes++;
        }

    }else{
        if(dian > 28){
            dian = 1;
            mes++;
        }
    }

}

var select = document.getElementById("select");

proxDia();
proxSemana();
select.add(new Option(dias[dia]  + ", " + dian + " de " + meses[mes] + " de " + ano));
proxDia()
proxSemana()
select.add(new Option(dias[dia]  + ", " + dian + " de " + meses[mes] + " de " + ano));
proxDia()
proxSemana()
select.add(new Option(dias[dia]  + ", " + dian + " de " + meses[mes] + " de " + ano));
proxDia()
proxSemana()
select.add(new Option(dias[dia]  + ", " + dian + " de " + meses[mes] + " de " + ano));
proxDia()
proxSemana()
select.add(new Option(dias[dia]  + ", " + dian + " de " + meses[mes] + " de " + ano));
proxDia()
proxSemana()
select.add(new Option(dias[dia]  + ", " + dian + " de " + meses[mes] + " de " + ano));
proxDia()
proxSemana()
select.add(new Option(dias[dia]  + ", " + dian + " de " + meses[mes] + " de " + ano));
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>SI1</title>
        <link rel="stylesheet" href="css/bootstrap.css">
        <script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
        <script type="text/javascript" src="js/script_pagina3.js"></script>

    </head>

    <body>

    <select id="select">
    </select>

    </body>

</html>

  • Thanks man, you helped a lot!

Browser other questions tagged javascript html

You are not signed in. Login or sign up in order to post.