如何从两个输入中获取值并在它们是否相等时写入输出消息？答案

【问题标题】：how to get the values from two inputs and write an output message if they are equal values or not?如何从两个输入中获取值并在它们是否相等时写入输出消息？
【发布时间】：2020-04-03 14:36:14
【问题描述】：

这就是我到目前为止所做的。问题是即使没有输入值，消息也会始终出现。另一件事，你会这样做吗？如果是的话，给我看看你的例子。

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>

【问题讨论】：

标签： javascript events input

【解决方案1】：

问题是您在按钮单击之前设置了值，例如：

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;
  }
}

演示：

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>

【讨论】：

【解决方案2】：

您必须获取这些值，然后每次进行比较，如下所示：

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>

【讨论】：