Javascript Uncaught TypeError：nullのプロパティ 'value'を設定できません

Question

これまでにこの問題をチェックしており、他の質問に記載されている解決策に基づいて解決できませんでした。

私はjavascriptを初めて使用しており、マイルをキロメートルに変換し、以下の関数まで達している関数を作成しようとしています。この段落要素を変換の値に設定したいと思います。

<p id="kValue"></p> 

var kilometersElement = document.getElementById("kvalue"); 
var milesElement = document.getElementById("mValue"); 

function convert() { 
    var km = (milesElement.value * 1.61); 
    km.toFixed(2); 
    console.log(km); 
    document.getElementById("kvalue").innerHTML = kilometersElement; 
} 

kmの値をコンソールに表示していますが、以下の行を実行しようとすると次のエラーが表示されます。

Uncaught TypeError: Cannot set property 'value' of null at convert (cmtk.js:41)

私は関数convert（）を呼び出しています。

誰かが私を助けることができますか？

Answer 1

このリンクをチェックすると、エラーへの回答が得られます。

Why does jQuery or a DOM method such as getElementById not find the element?

あなたが値を呼び出す方法は、あなたのコードがそれを呼び出す順序に依存します。

もの値を初期化しよう：

のvar kilometersElement

のvar milesElement

function convert(miles) { 
    return (miles * 1.61).toFixed(2); 
} 

var kilometersElement = document.getElementById("kValue"); 
var miles    = document.getElementById("mValue"); 

var kilometers = convert(miles); 
console.log(kilometers); 
kilometersElement.innerHTML = kilometers; 

Answer 2

ほとんどの場合、あなたは<input>要素に「id`属性と値を与えることを忘れていました。

<p id="kValue"></p> 
<form> 
    <input id="mValue" type="text" value=""> 
</form> 

---

<script> 

    function convertMilesToKm(miles) { 
     return (miles * 1.61).toFixed(2); 
    } 

    var miles = document.getElementById("mValue").value; //assuming textbox 
    var km = convertMilesToKm(miles); 

    console.log(km); 
    document.getElementById("kvalue").innerHTML = km; 

</script> 

OR

<script> 

    function showOutput(results, outputElement){ 
     console.log(results); 
     outputElement.innerHTML = results; 
     return; 
    } 

    function convertMilesToKm(miles) { 
     return (miles * 1.61).toFixed(2); 
    } 

    var km = convertMilesToKm(document.getElementById("mValue").value); 
    showOutput(km, document.getElementById("kvalue")); 

</script> 

OR、おそらく

<output id="kValue"></output> <!-- HTML5.x only --> 
<form> 
    <input id="mValue" type="text" value=""> 
</form> 

<script> 

    function showOutput(results, outputElement){ 
     console.log(results); 
     outputElement.innerHTML = results; 
     return; 
    } 

    function convertMilesToKm(miles) { 
     return (miles * 1.61).toFixed(2); 
    } 

    showOutput(convertMilesToKm(document.getElementById("mValue").value), 
              document.getElementById("kvalue")); 

</script>