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? — Teemu
– Teemu, Commented Feb 16, 2017 at 19:44
Check this link out , it gives you the answer to the error. [stackoverflow.com/questions/14028959/… — Adds
– Adds, Commented Feb 16, 2017 at 19:54
Make sure the source of the input has an id. See my answer, below. — Anthony Rutledge
– Anthony Rutledge, Commented Feb 16, 2017 at 20:29

Anthony Rutledge · Accepted Answer · 2017-02-16 21:15:20Z

2

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>

edited Feb 16, 2017 at 21:15

answered Feb 16, 2017 at 19:59

Anthony Rutledge

7,7742 gold badges42 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Anthony Rutledge Over a year ago

Note: 1 mi = 1.609344 km

Anthony Rutledge Over a year ago

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

Community · Accepted Answer · 2017-05-23 12:00:07Z

1

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;

edited May 23, 2017 at 12:00

CommunityBot

11 silver badge

answered Feb 16, 2017 at 19:56

Adds

6252 gold badges12 silver badges24 bronze badges

Comments

Yoshita Mahajan · Accepted Answer · 2020-10-28 07:17:45Z

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, 2020 at 7:17

Yoshita Mahajan

4634 silver badges6 bronze badges

Comments

sbgib · Accepted Answer · 2020-10-28 07:36:26Z

0

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.

answered Oct 28, 2020 at 7:36

sbgib

5,8583 gold badges22 silver badges27 bronze badges

Collectives™ on Stack Overflow

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

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related