セレクトメニュー付きCelcius/Fahrenheitの変換

-3

選択メニューで変換します。最初の入力ボックスはSelect Menuから変換する温度を読み取りますが、動作しませんでした。摂氏を選択すると、入力は温度を摂氏として読み込みます。セレクトメニュー付きCelcius/Fahrenheitの変換

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>

出典

2017-12-18 dalla dirosa

あなたは。あなたの第二 ''タグで –

感謝を浮遊 '" '（二重引用符を）持っている、しかし、まだ私の入力を読んで、それの仕事Thankssそれを –

それはIDの上のスペースを持っており、JavaScriptのセレクタに、あなたがスペースを持っていないとして、あなたは、あなたのHTML内の間違った複数のセレクタを持っています。エレメントIDのスペースを修正するだけで動作します。

"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>

出典

2017-12-18 19:05:22

補正しています。

注：トリガー機能については、ロジックをa previous answer of mineから再利用しました。

簡潔さのために、計算をラムダ定数に変換しました。下記を参照してください。

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>

出典

2017-12-18 19:48:36

を変換することはできません –

セレクトメニュー付きCelcius/Fahrenheitの変換

答えて

関連する問題