I have checked this question before on SO and was not able to solve it based on the solutions given in other questions.

I am new to javascript and am trying to create a function that converts miles to kilometers and have gotten as far as the function below. I want to set this paragraph element to the value of the conversion.

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

It gets as far as printing the value of km to the console but I am getting the following error when it tries to execute the line below.

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

At line 41 I am just calling the function convert();

Can anybody help me?

I have checked this question before on SO and was not able to solve it based on the solutions given in other questions.

I am new to javascript and am trying to create a function that converts miles to kilometers and have gotten as far as the function below. I want to set this paragraph element to the value of the conversion.

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

It gets as far as printing the value of km to the console but I am getting the following error when it tries to execute the line below.

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

At line 41 I am just calling the function convert();

Can anybody help me?

• javascript

• Possible duplicate of Why does jQuery or a DOM method such as getElementById not find the element? – Teemu Commented Feb 16, 2017 at 19:44
• Check this link out , it gives you the answer to the error. [stackoverflow./questions/14028959/… – Adds Commented Feb 16, 2017 at 19:54
• 2 you are looking for ID kvalue but it is kValue. – techi.services Commented Feb 16, 2017 at 19:56
• Make sure the source of the input has an id. See my answer, below. – Anthony Rutledge Commented Feb 16, 2017 at 20:29

4 Answers 4

Most likely, you forgot to give your <input> element an 'id` attribute and value.

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

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

Check this link out , it gives you the answer to the error.

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

The way you call the values depends on the order in which your code calls it.

Also try to initialize the values of the :

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;

Make sure you have given id property to the field which you want to fetch using document.getElementById('host').value

You can refer below example

To fetch host value in jsp

document.getElementById('host').value

Try like this:

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>

The only issue I see with the code in the question is that in the last line of the convert function, which is setting the innerHTML of the kilometersElement to itself.