Рендеринг вывода от пользователя в javascript - PullRequest
Новая
       32

Рендеринг вывода от пользователя в javascript

0 голосов
/ 02 августа 2020

Я изучаю веб-разработку, и у меня проблемы с JavaScript.

У меня есть веб-страница, на которой будут указаны данные о частоте из введенной частоты, но я не могу понять, как сделать if-statement работа.

Ниже HTML и ниже JavaScript. 

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Radio Frequency Assistant</title>
  </head>
  <body>
    <nav class="navbar">
      <h1>Radio Frequency Assistant</h1>
      <p>Helping to tune you in!</p>
    </nav>
    
    <div class="main">
        <div class="top">
          <div class="innerTop"><p></p></div>

          <div class="innerTop">
            <label>Enter a Value</label>
            <input name="freq" id="freq" type="text" size="10" placeholder="example 3.0254">
          </div>

          <div class="innerTop">
            <label>Choose Frequency</label>
            <form class="hertz">
              <select id="hertz">
                <option value="Hz">Hz</option>
                <option value="kHz">kHz</option>
                <option value="MHz">MHz</option>
                <option value="GHz">GHz</option>
                <option value="THz">THz</option>
              </select>
            </form>
          </div>

          <div class="innerTop">
            <button onclick="freqDetails()">Frequency Details</button>
          </div>

        </div><!-- top -->

        <div class="middle"></div><!-- middle -->

        <div class="bottom">
          <div class="innerBottom">
            <h3>Frequency Range</h3>
            <p>Top and Bottom Value</p>
            <p> Selected: <span id="enteredValue"> </span></p>
            <p> Range: <span id="freqRange"> </span></p>
          </div>

          <div class="innerBottom">
            <h3>Wavelength Range</h3>
            <p>Length of the Wave</p>
            <span id="waveRange"> </span>
          </div>

          <div class="innerBottom">
            <h3>Frequency</h3>
            <p>Band Information</p>
            <span id="bandRange"> </span>
          </div>

          <div class="innerBottom">
            <h3>Propagation</h3>
            <p>Type Used</p>
            <span id="prop"> </span>
          </div>
        </div><!-- bottom -->
      </div>
  
  </body>
</html>

Мой Javascript: 

function freqDetails()
{ 
    document.getElementById('enteredValue').innerHTML = 
        document.getElementById("freq").value +
        document.getElementById("hertz").value;

    var freq = enteredValue;
    if(freq <= '30kHz'){
        document.getElementById('freqRange').innerHTML = '3-30kHz';
        document.getElementById('waveRange').innerHTML = '100-1km';
        document.getElementById('bandRange').innerHTML = 'VLF';
        document.getElementById('prop').innerHTML = 'Ground Wave';
    }
}

Вся помощь оценен.

Ответы [ 2 ]

1 голос
/ 03 августа 2020

Проблема заключается в проверке 

if(freq <= '30kHz')

числовое сравнение не может быть выполнено для строк, содержащих буквенные c цифры, даже если они «однородны» (например, 23kHz < 30kHz).

Сначала вам нужно преобразовать частоту в числовое значение.

Эта функция выполняет свою работу: 

function freqDetails()
{
  var numFreq = document.getElementById("freq").value;
  var unit    = document.getElementById("hertz").value;
  var freq;
  
  document.getElementById('enteredValue').innerHTML = numFreq + unit;
  
  switch(unit)
  {     
      case "kHz":
        freq = 1000 * numFreq;
        break;
        
      case "MHz":
        freq = 1000000 * numFreq;
        break;
        
      case "GHz":
        freq = 1000000000 * numFreq;
        break;
        
      case "THz":
        freq = 1000000000000 * numFreq;
        break;
        
      case "Hz":
      default: /* We set "Hz" as the fallback case even if it should never occur */
        freq = numFreq;
        break;
  }
  
  if(freq <= 30000)
  {
    document.getElementById('freqRange').innerHTML = '3-30kHz';
    document.getElementById('waveRange').innerHTML = '100-1km';
    document.getElementById('bandRange').innerHTML = 'VLF';
    document.getElementById('prop').innerHTML = 'Ground Wave';
  }
  else
  {
    document.getElementById('freqRange').innerHTML = '';
    document.getElementById('waveRange').innerHTML = '';
    document.getElementById('bandRange').innerHTML = '';
    document.getElementById('prop').innerHTML = '';
  }
}

Описание:

  1. Прежде всего сохраните числовое значение и единицу измерения в двух разных переменных (numFreq и unit). Вы объедините их, чтобы заполнить enteredValue промежуток, как уже делалось ранее.
  2. С помощью оператора switch-case вычислите реальное числовое значение частоты (freq) в соответствии со значением numFreq и unit. В настоящее время вы проверяете только 30 кГц, но, как правило, правильно преобразовывать также значения ГГц и ТГц.
  3. Выполните правильную числовую проверку : if(freq <= 30000) - поскольку у вас есть freq в герцах, сравните его с 30 кГц в Гц.
  4. Убедитесь, что есть else, в котором вы очищаете значения на случай, если частота вернется ниже порога 30 кГц.
1 голос
/ 03 августа 2020

Всегда ли единицы измерения в кГц?

Потому что вам нужно будет преобразовать входные данные, которые являются строкой, в число. Затем вы можете провести численное сравнение данных. Однако, если единицы могут меняться, это становится немного сложнее.

Если единица измерения всегда кГц, это должно быть так просто, как: 

var freq = parseFloat(enteredValue);
if(freq <= 30){
    // ...
}

Если единицы могут отличаться, это немного сложнее, но должно сработать что-то вроде этого: 

var units = {kHz: 1000, Hz: 1}; // Augment this list will all supported units
var unit = enteredValue.match(/\d*\s*(\w*)\s*/);
var scalar = units[unit[1]] || 1;
var freq = parseFloat(enteredValue) * scalar;
if(freq <= 30 * 1000){ // * 1000 to express in Hertz
    // ...
}

Надеюсь, это решит вашу проблему.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...