Html Question posted in
Some basic documentation can be found here.

Html – Uncaught TypeError: Cannot read properties of null (caused by .value statement)

I’m facing a slight problem when testing how to retreive user’s input into a function to be used later on.

Specifically, in the line: decimalNum = document.getElementById("decimalNum").value;
there is the problem with the ‘value’ method – it says that the element’s value is null. It says so, even if I run the code and input a number.

What am I doing wrong? How do I get to use the user’s input in a function?

Problem resolved, I will accept the asnwer as sooon as I can (cooldown).

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1> Converter from Decimal to Binary</h1>
    <label for ="decimalNum"> Decimal (natural number): </label>
    <input type = "number"> 
    <button id="mySubmit"> Submit </button>
    <p id="binaryNum">  </p> <!-- Placeholder for the printed form in the Binary system.-->
    <button id="testing"> Test</button>
    <script>
        let decimalNum;

        document.getElementById("mySubmit").onclick = function() {;
            decimalNum = document.getElementById("decimalNum").value;
            document.getElementById("binaryNum").textContent = `Here is your number in the Binary system: ${decimalNum}`;
        };

        document.getElementById("testing").onclick = console.log('test was a success')
    </script>
</body>
</html>
Tags:

3

Answers


  1. 0

    The input element is missing the id attribute, which is needed to correctly identify the element.

    You can try the following way:

    <body>
<h1>Converter from Decimal to Binary</h1>
<label for="decimalNum">Decimal (natural number): </label>
<input type="number" id="decimalNum"> <!-- Added id attribute -->
<button id="mySubmit">Submit</button>
<p id="binaryNum"></p> <!-- Placeholder for the printed form in the Binary system.-->
<button id="testing">Test</button>
<script>
    let decimalNum;

    document.getElementById("mySubmit").onclick = function() {
      decimalNum = document.getElementById("decimalNum").value;
      document.getElementById("binaryNum").textContent = `Here is your number in the Binary system: ${decimalNum}`;
    };

    document.getElementById("testing").onclick = function() {
      console.log('test was a success');
    };
</script>
    Login or Signup to reply.
  2. 0

    add id="decimalNum" to your input:
    <input type="number" id="decimalNum">

    Login or Signup to reply.
  3. 0

    Two changes in your code is required.

    Like other answers says:

    Add ID to the input field.

    <input type="number" id="decimalNum">

    Second is the prevent the event like below:

    document.getElementById("mySubmit").onclick = function(event) {
    event.preventDefault(); // Prevent default form submission behavior
    decimalNum = document.getElementById("decimalNum").value;
    document.getElementById("binaryNum").textContent = `Here is your number in the Binary system: ${decimalNum}`;
};
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search