Javascript variables in HTML

Asked

Viewed 749 times

0

Good evening, I have an HTML file and I need to display on the page some variables that are in my Javascript, as I could make this connection?

javascript html

3 answers

0


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')
}

See this simple example with Jquery: here

0

Good afternoon. Maybe this can be useful:

<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>

0

You can use jQuery as it was published here or do this with just Javascript with innerHTML.

<div id="campo1"> 
a
</div>

<script>
variavel = 5;

document.getElementById("campo1").innerHTML = 'Valor da variavel: '+variavel;
</script>

innerHTML is used to pick up or set all the HTML of a particular page element, in our case it was from the div that has the id campo1

Browser other questions tagged javascript html

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