Aceder e concatenar elementos HTML em Javascript

felizol

Power Member
Bom dia pessoal,

Estou a frequentar um curso de Javascript e estou preso num exercício que não sei como resolver.

Espero que me possam ajudar.

Então aqui vai:

Preciso de concatenar os dois textos em baixo para que quando clique no botão eles fiquem juntos na mesma linha e apareçam na section. Mas não consigo fazer isto.

Seguem as instruções pedidas:

implementar a função juntarMostrar no HTML existente. Deve efetuar a junção dos elementos id parágrafo1 e class area1 dentro do section.

Nota: não se pode mexer nos elementos HTML.

Alguém pode ajudar? Agradeço desde já.

Deixo também o código que tenho até ao momento:

 

felizol

Power Member
Obrigado pela resposta. Já pesquisei no Google mas continuo a não perceber muito bem como fazer. tenho de colocar o text content na section?

Algo tipo isto: document.getElementById("paragrafo1").textcontent; ?
 

ric7

Power Member
Obrigado pela resposta. Já pesquisei no Google mas continuo a não perceber muito bem como fazer. tenho de colocar o text content na section?

Algo tipo isto: document.getElementById("paragrafo1").textcontent; ?

tens que pegar no textContent de cada parágrafo, e com javascript, tens de os colocar dentro da section, talvez dentro de outro paragrafo ou div, tens de ver no exercício. Eu podia dizer como fazê-lo, mas assim não aprendes, isto é um exercício simples, mas compreendo que no inicio manipular o DOM é uma valente dor de cabeça, mas este tipo de exercícios vai-te preparar melhor.

O exemplo que deste está correcto, agora é metê-los da section. Uma dica, usa o console.log para ver se estás a fazer as coisas correctas.

Já agora, que curso estás a fazer?
 

bammer

Power Member
Boas,

Como estás a começar, deixo-te aqui algumas dicas ;)

- Não coloques screenshot dos problemas, visto que será mais complicado teres ajuda. Tenta disponibilizar o código algures (ex: jsfiddle, codepen).
- Não sei até que ponto será boa prática escreveres os nomes dos IDs, classes ou funções em português. O inglês parece-me mais ajustado, a não ser que programes sempre "só para ti".
- Passava o código JS para antes do fim do </body> para que os elementos HTML carreguem primeiro, e estejam disponíveis quando o browser chegar à altura de interpretar o código JS.

Dito isto, à semelhança do que foi aqui dito pelo @ric7 , não vou colocar "a solução", mas vou-te explicar o que faria:
1. Criava 3 variáveis: 1 para o 1º parágrafo, outro para o 2º, e o 3º para a <section> onde queres inserir o texto.
2. Investiga o document.querySelector() e o .textContent, como já foi também referido.
3. Investiga a função append() para inserir o resultado das 2 primeiras variáveis na 3ª.

Com 4 linhas dentro da função consegues isso. Força!
 

felizol

Power Member
Obrigado a todos pelas respostas e pela ajuda.

De facto isto ao princípio é um pouco confuso. Respondendo ao @ric7 o curso é mesmo de Javascript da Formabase em Lisboa. Já fiz o de Web Developer mas quis aprofundar em Javascript.

Vou ver se consigo concluir o exercício com as vossas dicas.
 

ric7

Power Member
Obrigado a todos pelas respostas e pela ajuda.

De facto isto ao princípio é um pouco confuso. Respondendo ao @ric7 o curso é mesmo de Javascript da Formabase em Lisboa. Já fiz o de Web Developer mas quis aprofundar em Javascript.

Vou ver se consigo concluir o exercício com as vossas dicas.


https://www.youtube.com/watch?v=90PgFUPIybY&t=12s
https://www.youtube.com/watch?v=Xm4BObh4MhI&t=12622s

Tens aqui uns tutoriais que te podem ajudar.
Faz muitos projetos, não avances enquanto não te sentires bem com a matéria e aprende bem as bases, boa sorte.
 

Wasabe

Power Member
Boas,
no querySelector tens de usar um css selector e não apenas o nome, ou seja:

document.querySelector('area1) vai fazer com que o teu código procure por uma tag chamada "area1", que não existe
document.querySelector('.area1) vai-te devolver o elemento a que atribuiste o nome da classe (.) "area1"
document.querySelector('#paragrafo1') vai-te devolver o elemento a que atribuiste o nome do id (#) "paragrafo1"
document.querySelector('#paragrafo1') acaba por ser o mesmo que document.findElementById('paragrafo1')

Em relação ao resto, vais ter de pegar no textContent dos dois elementos, e concatena-los numa string, depois selecionas o teu elemento section, dás append de um novo elemento (por exemplo uma tag p) e substituis o innerText dessa tag com a String concatenada
 
Última edição:
Topo