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

get value from HTML input using JS

I just started learning coding. and i was trying to apply the OOP pradigm to an example.
I am trying to create an object (the character here) and assign its properties as the values input within the html file.

the error that keeps appearing is ‘javascript.js:14 Uncaught TypeError: Cannot read properties of null (reading ‘value’) .

    <body>
    <label for="namebox">Character Name</label>
    <input type="text" name="" id="namebox">
    <label for="agebox">Age</label>
    <input type="text" name="" id="agebox">
    <label for="humanclass">Human</label>
    <label for="majinclass">Majin</label>

    <input type="radio" name="class1" id="humanclass">
    <input type="radio" name="class1" id="majinclass">

    <input type="button" value="Create Character" id="creationbtn" onclick='char1.identify()'>
    <input type="reset" value="Cancel">

</body>

    class Charcreation {
    constructor(name, age, charclass) {
        this.name = name;
        this.age = age;
        this.class = charclass;
    }

    identify() {
        console.log('my name is ' + this.name + ' and i am a ' + this.age + ' years old ' + this.class)
    }
}


charname = document.getElementById("namebox").value;
charage = document.getElementById('agebox').value;
charselection = document.getElementByName('class1').value;
charclass =
    function getClass() {
        for (i == 0; i < charselection.length; i++) {
            if (charselection[i].checked)
                return charselection[i];
        }
    }

char1 = new Charcreation(charname, charage, charclass())
char1.identify();

Thanks in advance

Tags:

2

Answers


  1. 0

    the error that keeps appearing is ‘javascript.js:14 Uncaught TypeError: Cannot read properties of null (reading ‘value’) .

    Have you made sure that the script is firing after the DOM gets rendered?
    It’s possible that it is running before the actual HTML has been rendered and that is why .getElementById("namebox") is returning null.

    There are probably other ways to ensure this, but the easiest I know of is just put the script inside of the footer instead of the header.

    Login or Signup to reply.
  2. 0

    There are a few errors in your code as @Chris G points out plus some others. Here’s an update to your code with corrections to get a successful output for your char1.identify(); method.

    I’ve added some CSS styling that’s not necessary to the output.

    When the user clicks on the #creationbtn button, code execution needs to retrieve values of the form controls each time. Your original code is retrieving values of the input controls when the page is loaded and not each time the button is clicked.

    class Charcreation {
  constructor(name, age, charclass) {
    this.name = name;
    this.age = age;
    this.class = charclass;
  }

  identify() {
    var identityText = 'my name is ' + this.name + ' and i am a ' + this.age + ' years old ' + this.class;
    //console.log(identityText);
    document.querySelector("#identity").textContent = identityText;
  }
}

function createIdentity() {
  var charname = document.getElementById("namebox").value;
  var charage = document.getElementById('agebox').value;
  var charselection = document.getElementsByName('class1');
  var charclass =
    function getClass() {
      for (i = 0; i < charselection.length; i++) {
        if (charselection[i].checked) {
          var labelElem = document.querySelector("label[for=" + charselection[i].id + "]");
          if (labelElem) {
            return labelElem.textContent;
          }
        }
      }
    }

  var char1 = new Charcreation(charname, charage, charclass());
  char1.identify();
}
    #character-form {
  display: grid;
  width: 15rem;
}

.radio-control {
  display: grid;
  grid-auto-flow: column;
  padding: .5rem 0;
  width: fit-content;
}

.radio-control input {
  margin: 0 .5rem;
}
    <div id="character-form">
  <label for="namebox">Character Name</label>
  <input type="text" name="" id="namebox">

  <label for="agebox">Age</label>
  <input type="text" name="" id="agebox">

  <span class="radio-control">
        <label for="humanclass">Human</label>
        <input type="radio" name="class1" id="humanclass">
    </span>
  <span class="radio-control">
        <label for="majinclass">Majin</label>
        <input type="radio" name="class1" id="majinclass">
    </span>

  <input type="button" value="Create Character" id="creationbtn" onclick='createIdentity()'>
  <input type="reset" value="Cancel">
  <span id="identity"></span>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search