How to check if a text box has been filled via querySelector in one condition?

Question

I’m using DOM to upload the data and would like to use the if to give a innerHTML different if the fields were filled or not filled. But I don’t know what value to compare... No console.log presents such a Empty string. When executing code below it only enters the else/false.

function liberarUrna(){
  txt_tEleitor = window.document.querySelector('input#txt_tEleitor')
  txt_mVotacao = window.document.querySelector('input#txt_mVotacao')
  tEleitor = String(txt_tEleitor.value)
  mVotacao = String(txt_mVotacao.value)
  //console.log(tEleitor)
  //console.log(mVotacao)
  result = window.document.querySelector('div#result')

  if (tEleitor && mVotacao == "") {
    result.innerHTML = `<p>Favor preencher os campos</p>` 
  }
  result.innerHTML = `<p>Titulo de eleitor: ${tEleitor} <br> Município: ${mVotacao} <br><strong>Urna liberada para votação!</p>` 
}

Answer 1

What happens there is that you have none else in your code, and you FOUND that if I didn’t fall in if (who is also wrong) would execute the other code as an Else, BUT NOT, whenever executing the function independent of if it is true or not the innerHTML that shows the voter data will always be executed because it is not in any condition. To solve there are 2 ways, or, puts the code with the voter data inside an Else or inserts a return no if, what will stop the execution of the function there.

Your if is also wrong, missed check if the input txt_tEleitor is empty, the way you just input txt_mVotacao is being checked for value or is empty. Another error is that you used the comparison operator &&, i.e., to return what is inside if the 2 inputs would have to be empty, which is not correct, if an input is already empty you should already show the message to fill the fields:

function liberarUrna(){
  txt_tEleitor = document.querySelector('input#txt_tEleitor');
  txt_mVotacao = document.querySelector('input#txt_mVotacao');
  tEleitor = txt_tEleitor.value;
  mVotacao = txt_mVotacao.value;
  result = document.querySelector('div#result')

  if (tEleitor == '' || mVotacao == '') {
    return result.innerHTML = `<p>Favor preencher os campos</p>`
  }
  result.innerHTML = `<p>Titulo de eleitor: ${tEleitor} <br> Município: ${mVotacao} <br><strong>Urna liberada para votação!</p>`
}

<input type="text" id="txt_tEleitor">
<input type="text" id="txt_mVotacao">
<button onclick="liberarUrna()">Votar</button>
<div id="result"></div>

OBS 1: As stated in Luiz’s comment, you do not need to convert the input value to string, because the value returned by the inputs are already compatible with the string type.

OBS: 2 No need to declare the window object before Document, because window is already the root element of a web page, so in the DOM tree structure Document already belongs to window.