Javascript Uncaught TypeError: Cannot set property 'value' of null

Question

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?

Possible duplicate of [Why does jQuery or a DOM method such as getElementById not find the element?](http://stackoverflow.com/questions/14028959/why-does-jquery-or-a-dom-method-such-as-getelementbyid-not-find-the-element) — Teemu, Feb 16 '17 at 19:44
Check this link out , it gives you the answer to the error. [http://stackoverflow.com/questions/14028959/why-does-jquery-or-a-dom-method-such-as-getelementbyid-not-find-the-element][1] — Adds, Feb 16 '17 at 19:54
Make sure the source of the input has an `id`. See my answer, below. — Anthony Rutledge, Feb 16 '17 at 20:29

Anthony Rutledge · Answer 1 · 2017-02-16T21:15:20.110

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>

Later on, you will understand that having less identifiers in the global namespace helps avoid collisions with external libraries (if you choose to use them) or any shared code. I have reduced this down to two names in the namespace (`displayOutput` and `convertMilesToKm`). When you learn objects in JavaScript, you can wrap these function in an object and create namespaces with objects. See *JavaScript: The Definitive Guide, 6th or 7th Edition* — Anthony Rutledge, Feb 16 '17 at 20:37

score 1 · Answer 2 · edited May 23 '17 at 12:00

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;

score 0 · Answer 3 · answered Oct 28 '20 at 07:17

0

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

answered Oct 28 '20 at 07:17

Yoshita Mahajan

167
1
6

score 0 · Answer 4 · answered Oct 28 '20 at 07:36

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.

Javascript Uncaught TypeError: Cannot set property 'value' of null

4 Answers4