Boa noite, tenho um arquivo HTML e preciso exibir na pagina algumas variáveis que estão no meu JavaScript, como eu poderia fazer esta conexão?
3 Respostas
html:
<html>
<head>
<script data-require="jquery@*" data-semver="3.2.1" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<p id="idQueIdentificaP"></p>
<button type="button" onclick="alterar()">alterar de novo</button>
</body>
</html>
script:
$(document).ready(function() {
$('#idQueIdentificaP').text('JAVASCRIPT ALTEROU ESSE P')
});
function alterar(){
$('#idQueIdentificaP').text('JAVASCRIPT ALTEROU ESSE P DE NOVO')
}
Veja esse exemplo simples com Jquery: aqui
Você pode utilizar jQuery como foi publicado aqui ou fazer isso com apenas o Javascript com o innerHTML.
<div id="campo1">
a
</div>
<script>
variavel = 5;
document.getElementById("campo1").innerHTML = 'Valor da variavel: '+variavel;
</script>
innerHTML é utilizado para pegar ou setar todo o HTML de um determinado elemento da pagina, no nosso caso foi da div que tem o id campo1
Boa tarde. Talvez isso pode ser útil:
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div>
<h1 class="jsH1"></h1>
<input type="text" class="jsInput">
</div>
<script>
$(document).ready(function() {
//Nós definimos variáveis
var h1Content = 'Titulo pra o H1';
var inputContent = 'Valor do input';
//Nós carregamos as variáveis anteriores para seus respectivos contêineres
$('.jsH1').text(h1Content);
$('.jsInput').val(inputContent);
})
</script>
</body>
</html>