我想用Select菜单进行转换。因此，第一个输入框将读取从Select Menu转换的温度，但它不起作用。当我选择菜单摄氏度时，输入将读取温度为摄氏度。
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);
}<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>你的Html中有多个选择器错误，因为它在ID和JavaScript选择器上有空格你没有空格。只需修复元素ID中的空格即可
例如"demo "！=“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>如果要自动选择第一个选择选项，则需要触发事件。
注意：对于触发器功能，我重用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>