Question

我制作了一个小的网络应用程序。当我按下“输入”时，要确定必须检查是否有空值或空格值。在这种情况下，我有“警告”。

所以我使用了事件监听器。但是它工作不正确。当我不仅按下“输入”时，将显示警报。需要您的帮助！

const convert = document.getElementById('convert');

currentValue.addEventListener('keypress', function(event) {
  if (event.which === 13 && currentValue.value === '' ||
    currentValue.value === ' ') {
    alert('value is empty');
  } else {
    convertTemperature();
  }
}, false);

<div id="application">
  <input id="currentValue" type="number">
  <select id="select">
    <option value="celsius">Celsius</option>
    <option value="fahrenheit">Fahrenheit</option>
    <option value="kelvin">Kelvin</option>
  </select>
  </br>
  <button id="convert">Convert</button>
  </br>
  <input id="value1" type="text">
  </br>
  <input id="value2" type="text">
</div>

Answer 1

&&的优先级高于||因此，您必须为||添加（）条件如下(currentValue.value === '' || currentValue.value === ' ')

const convert = document.getElementById('convert');

currentValue.addEventListener('keypress', function(event) {
    if (event.which === 13 )
       if(currentValue.value === '' || currentValue.value === ' ') {
          alert('value is empty');
      } else {   
            convertTemperature();
      }
}, false);

Answer 2

请在下面尝试此

const convert = document.getElementById('convert');

currentValue.addEventListener('keypress', function(event) {
  if (event.which === 13) {
   if (currentValue.value === '' ||
    currentValue.value === ' ') {
    alert('value is empty');
  } else {
    convertTemperature();
  }
  }
}, false);

<div id="application">
  <input id="currentValue" type="number">
  <select id="select">
    <option value="celsius">Celsius</option>
    <option value="fahrenheit">Fahrenheit</option>
    <option value="kelvin">Kelvin</option>
  </select>
  </br>
  <button id="convert">Convert</button>
  </br>
  <input id="value1" type="text">
  </br>
  <input id="value2" type="text">
</div>

Answer 3

首先，您需要一个form，因此您无需专注于按钮，然后检查enter。

在这种情况下，您只需要操作员。

function convertTemp(event) {
  event.preventDefault();
  let __key = event.keyCode || event.which,
    __ipVal = document.getElementById('currentValue').value;
  if (__ipVal === '' || __ipVal === ' ') {
    alert('value is empty');
  } else {
    console.log('Convert Temp')

  }
}

<div id="application">
  <form id='convertTempForm' onsubmit='convertTemp(event)'>
    <input id="currentValue" type="number">
    <select id="select">
      <option value="celsius">Celsius</option>
      <option value="fahrenheit">Fahrenheit</option>
      <option value="kelvin">Kelvin</option>
    </select>

    <button id="convert" type='submit'>Convert</button>
  </form>
  <div>
    <input id="value1" type="text">
  </div>
  <div>
    <input id="value2" type="text">
  </div>
</div>

使用&&和||的正确方法在JavaScript中

3 个答案: