How to execute function when a <p> tag is filled?

Asked

Viewed 47 times

-1

I have a tag <p> and I want when it is filled with some text to appear a "reset" button, but I don’t know how to indicate that the tag is empty/filled.

javascript html
  • 1

    Want to see if it is empty when the page loads or want to know when it changes after the page loads and dynamically?

  • 1

    Are you using a library like jQuery

  • Ever tried some code? Have an example to add the question of what you have tried to do?

  • Don’t forget to mark the answer that solved your difficulty as aceita, see how in https://i.stack.Imgur.com/evLUR.png and see why in https://pt.meta.stackoverflow.com/questions/1078/como-e-por-que-aceitar-uma-resposta/1079#1079

2 answers

0

Using Mutationobserver:

//Elementos
var p = document.querySelector('p');
var input = document.querySelector('input');
var button = document.querySelector('button');

//Quando clicar o botão muda texto dentro do <p> (apenas para poder mostrar)
button.addEventListener('click', function() {
  p.innerHTML = input.value;
});

//Cria um observador que recebe uma função com a sua lógica
var observador = new MutationObserver(function() {
  console.log('mudou');

  if(p.innerHTML === '') {
    console.log('vazio');
  } else {
    console.log('tem alguma coisa');
  }
});

//Observa as mudanças na tag <p>, passando um objeto de configuração
observador.observe(p, {
  childList: true,
  attributes: false,
  characterData: false,
  subtree: false,
  attributeOldValue: false,
  characterDataOldValue: false
});
<p><p>
<input>
<button>mudar</button>

More information from configuration object

0

Check the contents of the tag

Contentedly - performs the function

var textoDoParagrafo = document.getElementById('qqId').textContent;

if (textoDoParagrafo!=""){
     //executa a função caso haja conteúdo na tag p cujo id é qqId
   var input = document.createElement("input");
   input.type = "reset";
   input.value = "Resetar";
   document.body.appendChild(input);
}
 <p id="qqId">Esse aqui é o conteúdo do paragrafo</p>

Unfulfilled - does not perform the function

var textoDoParagrafo = document.getElementById('qqId').textContent;

if (textoDoParagrafo!=""){
     //executa a função caso haja conteúdo na tag p cujo id é qqId
   var input = document.createElement("input");
   input.type = "reset";
   input.value = "Resetar";
   document.body.appendChild(input);
}
 <p id="qqId"></p>

TextContent compatibility

compatibilidade textContent

The estate textContent is supported in Internet Explorer from version 9. In older versions of Internet Explorer, use the property innerText for similar functionality. There are other Javascript properties and methods that work similarly to the property textContent:

var elem = document.getElementById ("qqId");
           
var mesnsagem = "";

mesnsagem += "\nouter text : " + elem.outerText;

mesnsagem += "\ninner HTML : " + elem.innerHTML;

mesnsagem += "\ntext Content : " + elem.textContent;

mesnsagem += "\ninner Text : " + elem.innerText;
    
console.log(mesnsagem);
<p id="qqId">Esse aqui é o conteúdo do paragrafo</p>

If you are not using tag identifier <p> access through the:

var textoDoParagrafo = document.getElementsByTagName('p')[2].textContent;

console.log(textoDoParagrafo);
<p>Esse aqui é o conteúdo do paragrafo de indice 0</p>
<p>Esse aqui é o conteúdo do paragrafo de indice 1</p>
<p>Esse aqui é o conteúdo do paragrafo de indice 2</p>
<p>Esse aqui é o conteúdo do paragrafo de indice 3</p>

And if there’s only one tag <p> access by index 0:

var textoDoParagrafo = document.getElementsByTagName('p')[0].textContent;

console.log(textoDoParagrafo);
<p>Esse aqui é o conteúdo do paragrafo de indice 0</p>

Browser other questions tagged javascript html

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