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的值打印到控制台，但是当它尝试执行下面的行时，我收到以下错误。

未捕获的TypeError：无法设置null的属性“value” 在转换（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>

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>

或者，可能

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

Answer 2

检查此链接，它会为您提供错误的答案。

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

调用值的方式取决于代码调用它的顺序。

还尝试初始化：

的值

varkmElement

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 3

确保已将id属性赋予要使用document.getElementById（'host'）。value获取的字段

您可以参考以下示例

要在jsp中获取主机值

document.getElementById（'host'）。value

Answer 4

尝试这样：

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

convert();

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

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

我在问题代码中看到的唯一问题是在convert函数的最后一行，该函数将innerHTML的{{1}}设置为其自身。

Javascript Uncaught TypeError：无法设置null的属性“value”

4 个答案: