Substituir um paragrafo utilizando getElementById e onclick

danielnmelo · Março 31, 2016

Pessoal, estou querendo substituir um texto por outro que o usuário vai decidir. Por isso coloquei um ID em cada "p" porém já tentei referenciar ele de várias formas e sempre dá errado. A única forma de fazer o código executar algo é se eu deixar uma frase já pronta para ele substituir.

<!doctype html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Teste</title>

   <script>
       function funcao() {
       document.getElementById("selecionar").innerHTML = "Quero colocar o ID do p aqui ";
}
   </script>
</head>
<body>
   <div><h1>selecionar</h1><p id="selecionar" >Aqui deve vir o texto selecionado<p>
   <h1>Cidades</h1>
   <ol>
       <li>
           <p id="p1" onclick="funcao()">Porto Alegre</p>
       </li>
       <li>
           <p id="p2" onclick="funcao()">São Paulo</p>
       </li>
       <li>
           <p id="p3" onclick="funcao()">Rio de Janeiro</p>
       </li>
   </ol>
</body>
</html>

wootzor · Março 31, 2016

Pretendes mostrar o ID ou o texto do parágrafo?

Assim consegues mostrar o texto do elemento que foi clicado:

<body>
  <div>
    <h1>selecionar</h1>
    <p id="selecionar">Aqui deve vir o texto selecionado</p>
    <h1>Cidades</h1>
    <ol>
      <li>
        <p id="p1" onclick="funcao(this)">Porto Alegre</p>
      </li>
      <li>
        <p id="p2" onclick="funcao(this)">São Paulo</p>
      </li>
      <li>
        <p id="p3" onclick="funcao(this)">Rio de Janeiro</p>
      </li>
      </ol>
  </div>
</body>

function funcao(elemento) {
  document.getElementById("selecionar").innerHTML = elemento.innerHTML;
}

Editado Março 31, 2016 por wootzor

danielnmelo · Abril 3, 2016

Obrigado pela ajuda wootzor...

Consegui resolver de uma maneira mais fácil, sem colocar ID nos <p>...

Segue abaixo o código

<!doctype html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Teste</title>

	<script>
	function funcao(p) {
	document.getElementById("selecionar").innerHTML = p.innerHTML;
	}
	</script>
	</head>
	<body>
	<div><h1>selecionar</h1><p id="selecionar" >Aqui deve vir o texto selecionado<p>
	<h1>Cidades</h1>
	<ol>
	<li>
	<p onclick="funcao(this)">Porto Alegre</p>
	</li>
	<li>
	<p onclick="funcao(this)">São Paulo</p>
	</li>
	<li>
	<p onclick="funcao(this)">Rio de Janeiro</p>
	</li>
	</ol>
	</body>
	</html>

Entrar

Substituir um paragrafo utilizando getElementById e onclick

Pergunta

danielnmelo

Link para o comentário

Compartilhar em outros sites

2 respostass a esta questão

Posts Recomendados

wootzor

Link para o comentário

Compartilhar em outros sites

danielnmelo

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades