4

Estou fazendo alguns testes iniciais com javascript, e não estou tendo sucesso ao tentar alterar um parâmetro do meu código HTML. A ideia é que ao clicar o botão "Message", o texto seja atualizado para "New Text!" Segue o código HTML e javascript:

<html>
<h1>Javascript</h1>
<h3 id="frase">Default text</h3>
<button id = "getMessage" class = "btn btn-primary"> Message </button>
</html>

$(document).ready(function() {
  $("#getMessage").on("click", function(){
    document.getElementById("frase").innerHTML = "New text!";
  });
});

Como devo integrar o que é exibido em HTML com meu código javascript?

1
  • 1
    Matheus, bemvindo! A tua pergunta está pouco clara... o código que tens está certo e funciona (vê aqui: jsfiddle.net/c56mg0m6). Qual é o problema que estás a ter para implementar isso?
    – Sergio
    25/08/2016 às 16:27

2 Respostas 2

4

Precisa adicionar a livraria do jQuery e também precisa inserir a TAG SCRIPT para o código JavaScript.

Execute o código abaixo e veja o script funcionando.

<html>
<h1>Javascript</h1>
<h3 id="frase">Default text</h3>
<button id="getMessage" class="btn btn-primary"> Message </button>
</html>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script>
$(document).ready(function() {
  $("#getMessage").on("click", function(){
    document.getElementById("frase").innerHTML = "New text!";
  });
});
</script>

0
2

Como foi mencionado, você está usando código que se baseia em jQuery. Teria que incluí-la primeiro por meio de um tag de <script/>.

Sendo já incluído, poderia re-escrever seu código da seguinte forma:

<script>
$(function() {
  $('#getMessage').on('click', function(){
    $('#frase').text('New Text!');
  });
});
</script>

A diferença aqui é o seguinte:

  • $(function(){}) é um shortcut por document.ready
  • Já que está pegando pelo id do #getMessage, pode fazer o mesmo no #frase
  • $('#frase').text() troca o texto que está dentro. Se for colocar HTML mesmo (e.g. <span>Algo</span>), usaria $('#frase').html()

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .