как получить значения из двух входов и написать выходное сообщение, если они равны или нет?

Question

Это то, чем я занимаюсь до сих пор. Проблема в том, что сообщение появляется всегда даже без ввода значения. Другое дело, вы бы сделали это по-другому? если да, покажи мне свои примеры.

let jogador1 = document.querySelector('#jogador1');
let jogador2 =document.querySelector('#jogador2');
let output = document.querySelector('#output');


let value1 = jogador1.value;
let value2 = jogador2.value;

let letsCompareValues = (value1, value2) => {

       if (value1 === value2 && value1 !== isNaN && value2 !==isNaN) {
           msg += ' there is a match';
           return output.textContent = msg;
       }


}

button.addEventListener('click', letsCompareValues(value1, value2));

            <div>
                <label for="jogador1">Player 1</label>
                <input type="text" id="jogador1">
            </div>
            <div>
                <label for="jogador2">Player 2</label>
                <input type="text" id="jogador2">
            </div>
            <button id="button">JOGAR</button>

Answer 1

Вы должны получить значения и затем сравнивать их каждый раз следующим образом:

let jogador1 = document.getElementById('jogador1');
let jogador2 =document.getElementById('jogador2');
let output = document.getElementById('output');
let btn = document.getElementById('button');
function letsCompareValues() {
     let value1 = jogador1.value;
     let value2 = jogador2.value;
     if (value1 === value2 && value1 !== isNaN && value2 !==isNaN) 
          output.innerHTML = 'there is a match';
     else
          output.innerHTML = 'there´s no match';;
}
btn.addEventListener('click', letsCompareValues);

<div>
     <label for="jogador1">Player 1</label>
     <input type="text" id="jogador1">
</div>
<div>
     <label for="jogador2">Player 2</label>
     <input type="text" id="jogador2">
</div>
<button id="button">JOGAR</button>
<p id="output"></p>

Answer 2

Проблема в том, что вы установили значение до нажатия кнопки только как:

let value1 = jogador1.value;
let value2 = jogador2.value;

Так что, даже если пользователь изменит эти значения ... временные значения, сохраненные в value1 & value2, будут всегда быть пустым. Вам просто нужно получить доступ к этим значениям внутри нажатия кнопки, например:

let letsCompareValues = () => {
  let msg = '';
  let value1 = jogador1.value;
  let value2 = jogador2.value;
  if (value1 === value2 && !isNaN(value1) && !isNaN(value2)) {
    msg += ' there is a match';
    output.textContent = msg;
    return output.textContent;
  } else {
    output.textContent = msg;
  }
}

DEMO:

let jogador1 = document.querySelector('#jogador1');
let jogador2 = document.querySelector('#jogador2');
let output = document.querySelector('#output');

let letsCompareValues = () => {
  let msg = '';
  let value1 = jogador1.value;
  let value2 = jogador2.value;
  if (value1 === value2 && !isNaN(value1) && !isNaN(value2)) {
    msg += ' there is a match';
    output.textContent = msg;
    return output.textContent;
  } else {
    output.textContent = msg;
  }
}

button.addEventListener('click', letsCompareValues);

<div>
  <label for="jogador1">Player 1</label>
  <input type="text" id="jogador1">
</div>
<div>
  <label for="jogador2">Player 2</label>
  <input type="text" id="jogador2">
</div>

<button id="button">JOGAR</button>
<div id="output">
</div>