How to execute function when a p-tag is filled?

Navigation
-1

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

    
asked by anonymous 15.07.2018 / 21:00

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 about the configuration object

    
15.07.2018 / 22:00
0
  

Check the contents of the tag

With content - runs 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>

No content - does not execute 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

  

ThetextContentpropertyissupportedinInternetExplorerfromversion9.InolderversionsofInternetExplorer,usetheinnerTextpropertyforsimilarfunctionality.  ThereareotherJavaScriptpropertiesandmethodsthatworksimilarlytothetextContentproperty:

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 an identifier in the <p> tag, go to the index: 

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 is only one <p> tag go to index 0: 

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

console.log(textoDoParagrafo);
<p>Esse aqui é o conteúdo do paragrafo de indice 0</p>
    
16.07.2018 / 01:03
run python on another machine Button with dropdown does not work inside a div