Javascript Uncaught TypeError：无法设置 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 的值打印到控制台，但是当它尝试执行下面的行时出现以下错误。

未捕获的类型错误：无法在转换时设置 null 的属性“值”（cmtk.js:41）

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

有谁能够帮我？

原文由 Trenton Tyler 发布，翻译遵循 CC BY-SA 4.0 许可协议

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>

原文由 Anthony Rutledge 发布，翻译遵循 CC BY-SA 3.0 许可协议