Jquery.text does not work

Asked

Viewed 55 times

1

They are not empty, but I cannot place the text inside the Ivs

HTML

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="style.css">
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
        integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <!-- JQUERY -->
    <script src="https://code.jquery.com/jquery-3.4.0.min.js"
        integrity="sha256-BJeo0qm959uMBGb65z40ejJYGSgR7REI4+CW1fNKwOg=" crossorigin="anonymous"></script>
    <script src="index.js"></script>
    <title>Relógio</title>
</head>
<body>
    <div class="container">
        <div id="relogio" class="fundo">
            <div class="col-xs-4 col-sm-4 col-sm-4 col-md-4 caixa" id="horas"></div>
            <div class="col-xs-4 col-sm-4 col-sm-4 col-md-4 caixa" id="minutos"></div>
            <div class="col-xs-4 col-sm-4 col-sm-4 col-md-4 caixa" id="segundos"></div>
        </div>
    </div>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>

CSS

html, body, .container{
    width: 100%;
    height: 100%;
}
.fundo {
    background-color: bisque;
    width: 80%;
    height: 80%;
    margin-top: 5%;
    margin-left: 8%;
    padding-top: 15%;
}

.caixa {
    background-color: burlywood;
    color: black;
    font-size: 8em;
    width: 40%;
    height: 40%;
    border: solid 5px;
}

JQUERY

var $horas = $('#horas'),
    $minutos = $('#minutos'),
    $segundos = $('#segundos');

function pegaHora(){
    var data = new Date();

    var horas = data.getHours() < 10
            ? '0' + data.getHours()
            : data.getHours();

    var minutos = data.getMinutes() < 10
            ? '0' + data.getMinutes()
            : data.getMinutes()

    var segundos = data.getSeconds() < 10
            ? '0' + data.getSeconds()
            : data.getSeconds();

    //alert(horas + minutos + segundos);
    $horas.text("dafuck");
    $minutos.text(minutos);
    $segundos.text(segundos);
}

pegaHora();
window.setInterval(pegaHora, 1000);

inserir a descrição da imagem aqui

jquery

3 answers

1

So I don’t know what environment you’re testing, but, as you can see below, it’s working normally:

var $horas = $('#horas'),
  $minutos = $('#minutos'),
  $segundos = $('#segundos');

function pegaHora() {
  var data = new Date();

  var horas = data.getHours() < 10 ?
    '0' + data.getHours() :
    data.getHours();

  var minutos = data.getMinutes() < 10 ?
    '0' + data.getMinutes() :
    data.getMinutes()

  var segundos = data.getSeconds() < 10 ?
    '0' + data.getSeconds() :
    data.getSeconds();

  //alert(horas + minutos + segundos);
  $horas.text("dafuck");
  $minutos.text(minutos);
  $segundos.text(segundos);
}

pegaHora();
window.setInterval(pegaHora, 1000);
html,
body,
.container {
  width: 100%;
  height: 100%;
}

.fundo {
  background-color: bisque;
  width: 80%;
  height: 100%;
  margin-top: 15%;
  margin-left: 8%;
  padding-top: 15%;
}

.caixa {
  background-color: burlywood;
  color: black;
  font-size: 2em;
  width: 40%;
  height: 40%;
  border: solid 5px;
}
<link rel="stylesheet" href="style.css">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- JQUERY -->
<script src="https://code.jquery.com/jquery-3.4.0.min.js" integrity="sha256-BJeo0qm959uMBGb65z40ejJYGSgR7REI4+CW1fNKwOg=" crossorigin="anonymous"></script>

<div class="container">
  <div id="relogio" class="fundo">
    <div class="col-xs-4 col-sm-4 col-sm-4 col-md-4 caixa" id="horas"></div>
    <div class="col-xs-4 col-sm-4 col-sm-4 col-md-4 caixa" id="minutos"></div>
    <div class="col-xs-4 col-sm-4 col-sm-4 col-md-4 caixa" id="segundos"></div>
  </div>
</div>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

  • I’m just opening on Chrome (I’ve already cleared the cache). In opera tbm does not work. No error appears on the console. I put an image, the text does not appear in the Ivs

  • Very strange, because the code is correct, by the way very well written, simple and effective. I really do not know the pq is not working there.

1


It seems to me that your script is inside the file index.js.
Instead of including him inside the <head> put it before the </body>, like you did with the bootstrap.min.js.

It’s probably not working because you’re creating the variables 

var $horas = $('#horas'),
    $minutos = $('#minutos'),
    $segundos = $('#segundos');

at a time when the html has not yet been loaded, in the <head>, then the jQuery will not find your selector.
As the creation of these variables is outside the function pegaHora, which is called with setInterval, they’re gonna get a jQuery with no result forever.

Another possible solution is to put your script to run within one of the events $(document).ready or window.onload

window.onload = function(){

   /// seu script

};

/// ou 

$(document).ready(function(){

   /// seu script

});

What is the difference between $(Document). ready() and window.onload?

0

Strange was supposed to work, so try using the .html() and see if it works.

$horas.html("dafuck");
    $minutos.html(minutos);
    $segundos.html(segundos);

Make this change and see if it works.

Browser other questions tagged jquery

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