Question

我想转换，使用选择菜单。因此，第一个输入框将从“选择菜单”中读取要转换的温度，但它不起作用。当我选择菜单摄氏度时，输入将温度读取为摄氏度。

＆＃13;

function myFunction() {
  if (document.getElementById("temperature").value == "Celcius") {
    convertc();
  } else {
    convertf();
  }
}

function convertc() {
  var x;
  document.getElementById("demo").innerHTML = " Degree Celcius ";
  x = (document.getElementById("c").value - 32) * 5 / 9;
  document.getElementById("f").value = Math.round(x);
}

function convertf() {
  var x;
  document.getElementById("demo").innerHTML = " Degree Fahrenheit ";
  x = document.getElementById("c").value * 9 / 5 + 32;
  document.getElementById("f").value = Math.round(x);
}

＆＃13;

<h2>JavaScript Celcius to Fahrenhet</h2>
<form>
  <select id="temperature" onchange="myFunction()">
             <option value="Celcius">Celcius</option>
             <option value="Fahrenheit">Fahrenheit</option>
         </select>
</form>
<p>
  <input id="c"><span id="demo"> Degree </span></p>
<p>
  <input id="f"></p>

＆＃13;

Answer 1

你的Html中有多个选择器错误，因为它在ID和JavaScript选择器上有空格你没有空格。只需修复元素ID中的空格即可，

e.g。 "demo "！=“演示”

以下是更正后的ID和JavaScript选择器

function myFunction() {
    if (document.getElementById("temperature").value == "Celcius") {
        convertc();

    } else {
        convertf();
    }
}

function convertc() {
    var x;
    document.getElementById("demo").innerHTML = " Degree Celcius ";
    x = (document.getElementById("c").value - 32) * 5 / 9;
    document.getElementById("f").value = Math.round(x);
}

function convertf() {
    var x;
    document.getElementById("demo").innerHTML = " Degree Fahrenheit ";
    x = document.getElementById("c").value * 9 / 5 + 32;
    document.getElementById("f").value = Math.round(x);
}

<body>
   <h2>JavaScript Celcius to Fahrenhet</h2>
   <form>
     <select id="temperature" onchange="myFunction()">
         <option value="Celcius">Celcius</option>
         <option value="Fahrenheit">Fahrenheit</option>
     </select>
   </form>
   <p>
     <input id="c"><span id="demo"> Degree </span></p>
   <p>
     <input id="f" ></p>
</body>

Answer 2

如果要自动选择第一个选择选项，则需要触发事件。

注意：对于触发功能，我重复使用a previous answer of mine中的逻辑。

为简洁起见，我还将计算转换为lambda常数，见下文。

const FAHRENHEIT_TO_CELSIUS = (value) => (value - 32) * 5 / 9;
const CELSIUS_TO_FAHRENHEIT = (value) => value * 9 / 5 + 32;
// ==============================================================
var comboEl = document.getElementById('temperature');
addEventListener(comboEl, 'change', onComboChange); // Add an event listener.
triggerEvent(comboEl, 'change', {}); // Automatically trigger the event.
// ==============================================================
function onComboChange(e) {
  var inputValue = document.getElementById('input-degrees').value;
  if (e.target.value === 'Celsius') {
    updateDisplay('Celsius', CELSIUS_TO_FAHRENHEIT(inputValue));
  } else {
    updateDisplay('Fahrenheit', FAHRENHEIT_TO_CELSIUS(inputValue));
  }
}
function updateDisplay(label, value) {
  document.getElementById('degrees-label').innerHTML = 'Degrees ' + label;
  document.getElementById('output-degrees').value = Math.round(value);
}
// ==============================================================
function addEventListener(el, eventName, handler) {
  if (el.addEventListener) {
    el.addEventListener(eventName, handler);
  } else {
    el.attachEvent('on' + eventName, function() {
      handler.call(el);
    });
  }
}
function triggerEvent(el, eventName, options) {
  var event;
  if (window.CustomEvent) {
    event = new CustomEvent(eventName, options);
  } else {
    event = document.createEvent('CustomEvent');
    event.initCustomEvent(eventName, true, true, options);
  }
  el.dispatchEvent(event);
}

<h2>JavaScript Celsius to Fahrenheit</h2>
<form>
  <select id="temperature">
       <option value="Celsius">Celcius</option>
       <option value="Fahrenheit">Fahrenheit</option>
   </select>
</form>
<p>
  <input id="input-degrees" value="0" />
  <span id="degrees-label">Degrees</span>
</p>
<p><input id="output-degrees" /></p>

使用选择菜单转换Celcius / Fahrenheit

2 个答案: