Javascript 未捕获类型错误 : Cannot set property 'value' of null

Question

我之前在SO上查过这个问题，根据其他问题给出的方案无法解决。

我是 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)

在第 41 行，我只是调用函数 convert();

谁能帮帮我？

Answer 1

很有可能，您忘记提供您的 <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>

或

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

或者，可能

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