-
Conteúdo Similar
-
Por BrunoJavan
Olá, estou com um problema no mínimo curioso. Tenho uma div com ID "conteudo" e na hora de pegar essa div através do getElementById ou até mesmo do querySelector, SEMPRE retorna null no console. O mais estranho é que se eu digito diretamente no console, funciona normalmente. Detalhe: isso acontece tanto no Firefox quanto no Chrome.
Segue código abaixo:
<!DOCTYPE html> <html lang="pt-BR"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Relógio</title> <script> console.log( document.getElementById("conteudo") ); </script> </head> <body> <div id="conteudo">teste</div> </body> </html>
To até agora tentando entender pq sempre retorna null mas quando digito diretamente no console do navegador funciona. Alguém sabe me dizer que treta é essa?
-
Por guilherme.audi
Olá, pessoal,
Sou meio-leigo e logo mais serei vesgo... não entendi onde está o problema:
Tenho uma situação de submenu bem simples, que deve mostrar (display="table") e esconder (display="none") algumas divs, conforme a seleção do usuário.
No início da página antes do <head> criei a seguinte estrutura:
<!-- CONTROLE DE ABAS :: MENU DETALHES -->
<script>
function SelecCarac() {
var caracteristicas = document.getElementById('div_carac');
var dimensoes = document.getElementById('div_dimensoes');
var projeto3d = document.getElementById('div_3d');
var videotutorial = document.getElementById('div_video');
var esquemafios = document.getElementById('div_esquemafios');
caracteristicas.style.display = "table";
dimensoes.style.display = "none";
projeto3d.style.display = "none";
videotutorial.style.display = "none";
esquemafios.style.display = "none";
}
function SelecDimensoes() {
var caracteristicas = document.getElementById('div_carac');
var dimensoes = document.getElementById('div_dimensoes');
var projeto3d = document.getElementById('div_3d');
var videotutorial = document.getElementById('div_video');
var esquemafios = document.getElementById('div_esquemafios');
caracteristicas.style.display = "none";
dimensoes.style.display = "table";
projeto3d.style.display = "none";
videotutorial.style.display = "none";
esquemafios.style.display = "none";
}
function Selec3D() {
var caracteristicas = document.getElementById('div_carac');
var dimensoes = document.getElementById('div_dimensoes');
var projeto3d = document.getElementById('div_3d');
var videotutorial = document.getElementById('div_video');
var esquemafios = document.getElementById('div_esquemafios');
caracteristicas.style.display = "none";
dimensoes.style.display = "none";
projeto3d.style.display = "table";
videotutorial.style.display = "none";
esquemafios.style.display = "none";
}
function SelecVideo() {
var caracteristicas = document.getElementById('div_carac');
var dimensoes = document.getElementById('div_dimensoes');
var projeto3d = document.getElementById('div_3d');
var videotutorial = document.getElementById('div_video');
var esquemafios = document.getElementById('div_esquemafios');
caracteristicas.style.display = "none";
dimensoes.style.display = "none";
projeto3d.style.display = "none";
videotutorial.style.display = "table";
esquemafios.style.display = "none";
}
function SelecEsquemaFios() {
var caracteristicas = document.getElementById('div_carac');
var dimensoes = document.getElementById('div_dimensoes');
var projeto3d = document.getElementById('div_3d');
var videotutorial = document.getElementById('div_video');
var esquemafios = document.getElementById('div_esquemafios');
caracteristicas.style.display = "none";
dimensoes.style.display = "none";
projeto3d.style.display = "none";
videotutorial.style.display = "none";
esquemafios.style.display = "table";
}
</script>
(ridiculamente extenso, até suponho que haja um caminho menor..)
As abas desse "submenu" estão no corpo da página (asp clássico) assim:
<!-- ABAS :: MENU DE DETALHES DO PRODUTO -->
<div class="container-principal" style="text-align: center;">
<% if Len(VetProd(97,0)) > 5 Then %>
<div class="detalhe-menu-abas" id="bt_carac" onclick="SelecCarac()" >Características</div>
<%End if
if Len(VetProd(11,0)) > 0 Then %>
<div class="detalhe-menu-abas" id="bt_dimensoes" onclick="SelecDimensoes()">Dimensões</div>
<%End if
if Len(VetProd(92,0)) > 1 Then %>
<div class="detalhe-menu-abas" id="bt_3d" onclick="Selec3D()">Desenho 3D</div>
<%End if
if Len(VetProd(135,0)) > 3 Then %>
<div class="detalhe-menu-abas" id="bt_video" onclick="SelecVideo()">Video tutorial</div>
<%End if
if Len(VetProd(22,0)) > 0 Then %>
<div class="detalhe-menu-abas" id="bt_esquemafios" onclick="SelecEsquemaFios()">Ligação dos fios</div>
<%End if%>
</div>
<!-- -->
..E essas id chamadas "div_carac", "div_dimensoes", "div_3d", "div_video" e "div_esquemafios" estão assim:
<!-- DIMENSÕES -->
<div class="container-principal" style="text-align: center; display: none;" id="div_dimensoes">
<h3 style="text-align: left;">Dimensões<span class="letramed2"> (mm)</span></h3>
<a href="admin/imgs/icones/<%= VetProd(11,0) %>" target="_blank"><img src="admin/imgs/icones/<%= VetProd(11,0) %>" alt="Dimensões de <%= VetProd(1,0) %> em mm" title="<%= VetProd(136,0) %> <%= VetProd(2,0) %> <%= VetProd(1,0) %>" class="detalhe-dimensoes"/></a>
</div>
<!-- -->
<!-- CARACTERÍSTICAS ESPECIAIS -->
<div class="container-principal" id="div_carac">
<h3>Características especiais</h3>
<%= VetProd(97,0)%>
</div>
<!-- -->
<!-- VÍDEO INCORPORADO -->
<div style="background-color: #000000; width: 100%; display: none;" id="div_video">
<div class="container-principal" style="background-color: black; text-align: center; padding: 1% 0;">
<iframe class="detalhe-video" src="<%= VetProd(135,0) %>" frameborder="0" allowfullscreen></iframe><br />
<a href="https://www.youtube.com/user/weightechbrasil/search?query=<%=VetProd(1,0)%>" style="color:#FFFFFF;" title="Veja mais em Youtube/WeightechBrasil" target="_blank" class="submenu"><img src="http://www.weightech.com.br/imgs/site/Logo_Youtube_color_horizontal.png" height="30" title="Canal WeightechBrasil no Youtube" alt="Youtube.com/WeightechBrasil" style="margin-bottom:5px;"/><br>Youtube.com/WeightechBrasil</a>
</div>
</div>
<!-- -->
<!-- PROJETO 3D -->
<% if Len(VetProd(92,0)) > 1 Then %>
<div class="container-principal" style="text-align: center; margin-top: 20px; display: none;" id="div_3d">
<iframe style="width: 100%; height: 680px;" src="<%=VetProd(92,0)%>" allowfullscreen="true" webkitallowfullscreen="true" mozallowfullscreen="true" frameborder="0"></iframe>
</div>
<%End if%>
<!-- -->
<!-- ESQUEMA DE LIGAÇÃO -->
<div class="container-principal" style="display: none;" id="div_esquemafios">
<h3>Esquema de ligação dos fios</h3>
<img src="admin/imgs/icones/<%= VetProd(22,0) %>" alt="Esquema de ligação" title="<%= VetProd(136,0) %> <%= VetProd(2,0) %> <%= VetProd(1,0) %>" style="width:90%; max-width:400px;"/>
</div>
<!-- -->
Tudo funciona, exceto o VÍDEO INCORPORADO (id="div_video").
Por quê?!
Obrigado!
-
Por moisesgodoi
Olá boa noite estou com o seguinte código:
<script type="text/javascript">
var xhr = new XMLHttpRequest(),
method = "GET",
url = "http://webserver.flsoft.com.br/BRPremium/webservice/buscarDados/3";
xhr.open(method, url, true);
xhr.onreadystatechange = function () {
if(xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
var element = document.getElementById("cliente");
console.log(xhr.responseText);
}
};
xhr.send();
</script>
<p id="cliente"></p>
Preciso que a variável "clientes" informe o total de clientes da url, no console deu certo aparece o total mas na id como faço pra mostrar no site?
-
Por Brendon Rodrigues Miranda
Gostaria de saber se é possível fazer o evento onclick retornar ao estado antes do click ao clickar novamente, é possível? seja por condicional ou algo parecido, se sim como?
meu objetivo é alternar 2 imagens diferentes com apenas o evento onclick!
-
Por Kleb.Gomes
Olá.
Estou com a seguinte dúvida:
Tento fazer com que o usuário digite 3 valores de um triângulo em um input cada.
Logo em seguida, o código deve mostrar se os valores satisfazem os requisitos para que o triângulo exista e, além disso, qual o tipo do triângulo.
Não sei se o ideal seria aqui ou em HTML5.
Com ele todo em JS eu consigo fazer, mas quero aprender mais.
<meta charset="UTF-8"> <html> <head> <script type="text/javascript"> //esta função mostra uma frase no navegador e pula uma linha. var mostra = function(frase){ document.write(frase + "<br>"); }; //esta função verifica se a condição de existência do triângula é suprida. function condicao_existencia(){ var n1 = parseInt(document.getElementById('base')); var n2 = parseInt(document.getElementById('ladob')); var n3 = parseInt(document.getElementById('ladoc')); if (n1 < n2 + n3 && n2 < n3 + n1 && n3 < n1 + n2){ document.getElementById('existencia').value = "Esses números satisfazem a condição de existência de um triângulo"; } else{ document.getElementById('existencia').value = "Esses números não satisfazem a condição de existência de um triângulo"; }; tipo_triangulo(); }; //esta função checa que tipo de triângulo é function tipo_triangulo(){ if (n1 === n2 && n2 === n3) { document.getElementById('tipo').value = "Esses valores podem formar um triângulo EQUILÁTERO"; }; if (n1 != n2 && n2 != n3 && n3 != n1){ document.getElementById('tipo').value = "Esses valores podem formar um triângulo ESCALENO"; }; if (n1 != n2 && n2 === n3) { document.getElementById('tipo').value = "Esses valores podem formar um triângulo ISÓSCELES"; }; }; //variáveis var n1 = parseInt(document.getElementById('base')); var n2 = parseInt(document.getElementById('ladob')); var n3 = parseInt(document.getElementById('ladoc')); </script> </head> <body> <center> <font size="8" color="purple">PROGRAMA PARA CÁLCULO DE TRIÂNGULO</font><br><br> <form> Informe o valor da base (a) do triângulo: <input type="text" id="base"><br> Informe o valor do lado b do triângulo: <input type="text" id="ladob"><br> Informe o valor do lado c do triângulo: <input type="text" ide="ladoc"><br> <input type="button" id="calcular" value="Verificar Triângulo" onclick="condicao_existencia();"><br> Validade do triângulo: <input type="text" id="existencia"> <br> Tipo de triângulo: <input type="text" id="tipo"> </script> </form> </body> </html>
-
