CODEWITHSUNDEEP
javascript
Trenton Tyler
Trenton Tyler

Reputation: 534

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

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?

Upvotes: 2

Views: 24180

Answers (4)

sbgib
sbgib

Reputation: 5838

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.

Upvotes: 0

Yoshita Mahajan
Yoshita Mahajan

Reputation: 463

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

Upvotes: 0

Adds
Adds

Reputation: 631

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;

Upvotes: 1

Anthony Rutledge
Anthony Rutledge

Reputation: 7604

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>

Upvotes: 2

Related Questions